# Problem with top margin

**URL:** <https://forum.ionicframework.com/t/problem-with-top-margin/130465>\
**Category:** ionic-v3\
**Created:** [May 14, 2018, 1:04pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465 "2018-05-14T13:04:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ddoudix](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@ddoudix](https://forum.ionicframework.com/u/ddoudix)\
**Post date:** [May 14, 2018, 1:04pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/1 "2018-05-14T13:04:40Z")

</div>

Hello,

I have a problem when I start my app sometimes there is no top-margin (like the screen) and sometimes its ok, someone gave a solution please ?!

Thank you.

 ![dd](https://global.discourse-cdn.com/ionicframework/original/3X/e/2/e2466c930335ade515d3590a58f232f55e375031.jpg)

---

<div class="post-metadata">

**Author:** ![morphist](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/morphist/32/127474_2.png) [@morphist](https://forum.ionicframework.com/u/morphist)\
**Post date:** [May 14, 2018, 3:01pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/2 "2018-05-14T15:01:28Z")

</div>

Well share your code then if you need help. There is no magic to help you based on screenshot…

---

<div class="post-metadata">

**Author:** ![ddoudix](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@ddoudix](https://forum.ionicframework.com/u/ddoudix)\
**Post date:** [May 14, 2018, 7:51pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/3 "2018-05-14T19:51:49Z")

</div>

Sorry for being late, this is the code of my home page app :

````auto
<ion-header >
    <ion-toolbar >
        <ion-title ><b>Around SQLI</b></ion-title>
      </ion-toolbar>
    <div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
        <div class="flb">
          <div class="Aligner-item Aligner-item--top"></div>
          <img src="assets/imgs/logo.png">
          <div class="Aligner-item Aligner-item--bottom"></div>
        </div>
      </div>
  
</ion-header>

<ion-content padding-top text-center>
  <ion-grid>
    <ion-row>
      <ion-col>
        <img style="border-radius:10px;margin-bottom:10px;" src="assets/imgs/bio.jpg" (click)="goToPageBIO()"><br>
        <img style="border-radius:10px;" src="assets/imgs/rest.jpg" (click)="goToPageRE()">
      </ion-col>
      <ion-col>
        <img style="border-radius:10px;margin-bottom:10px;" src="assets/imgs/ff.jpg" (click)="goToPageFF()">
        <img style="border-radius:10px;" src="assets/imgs/supp.jpg" (click)="goToPageSU()">
      </ion-col>
    </ion-row>
    </ion-grid> 
</ion-content>```
````

---

<div class="post-metadata">

**Author:** ![morphist](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/morphist/32/127474_2.png) [@morphist](https://forum.ionicframework.com/u/morphist)\
**Post date:** [May 15, 2018, 12:43am UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/4 "2018-05-15T00:43:23Z")

</div>

Any reason why are you not using standard approach with navbar in top panel?

```auto
<ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>

```

---

<div class="post-metadata">

**Author:** ![ddoudix](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@ddoudix](https://forum.ionicframework.com/u/ddoudix)\
**Post date:** [May 15, 2018, 9:16am UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/5 "2018-05-15T09:16:33Z")

</div>

Maybe I forgot to use it, but is it important ?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 15, 2018, 8:38pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/6 "2018-05-15T20:38:47Z")

</div>

> [@ddoudix](#):
>
> is it important ?

You have a Tab Bar and tap-able images so you want your users to navigate to other pages. On those ‘other’ pages you will often use a ‘ion-navbar’ in your header, for example:

```auto
<ion-header>

  <ion-navbar>
    <ion-title>
      {{ 'VENUES_PAGE_TITLE' | translate }}
    </ion-title>
  </ion-navbar>

</ion-header>

```

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/f/dfe8e73846ec05e5b7c3c59a853e0c56bd3f87be.jpg)

However, on your Tab pages:

```auto
<ion-tabs #tabs selectedIndex="2" (ionChange)="onIonChanged($event)">
  <ion-tab [root]="tab0Root" tabUrlPath="activity-tab" tabIcon="fa-fal-list"></ion-tab>
  <ion-tab [root]="tab1Root" tabUrlPath="location-tab" tabIcon="fa-fal-map-marker"></ion-tab>
  <ion-tab [root]="tab2Root" tabUrlPath="search-tab" tabIcon="fa-fal-street-view"></ion-tab>
  <ion-tab [root]="tab3Root" tabUrlPath="person-tab" tabIcon="fa-fal-user"></ion-tab>
  <ion-tab [root]="tab4Root" tabUrlPath="notifications-tab" tabIcon="fa-fal-bell"></ion-tab>
</ion-tabs>

```

You don’t need an ‘ion-navbar’ in your header, for example

```auto
<ion-header>

  <ion-searchbar id="searchbar" placeholder="{{ 'SEARCH_PAGE_SEARCHBAR_PLACEHOLDER' | translate }}" (ionInput)="getItems($event)"></ion-searchbar>

</ion-header>

```

 ![search-tab](https://global.discourse-cdn.com/ionicframework/original/3X/e/b/eb2e93be6275c31a386a121e3e75980f0c90dac5.png)

---

<div class="post-metadata">

**Author:** ![ddoudix](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@ddoudix](https://forum.ionicframework.com/u/ddoudix)\
**Post date:** [May 15, 2018, 8:55pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/7 "2018-05-15T20:55:46Z")

</div>

Thank you, this is not the problem.  
I don’t know if you understood what I said in the topic.  
When I start the App (in the screen) the photos are cut off

 ![dd](https://global.discourse-cdn.com/ionicframework/original/3X/e/2/e2466c930335ade515d3590a58f232f55e375031.jpg)

But when I click on a category and I get back to the home page, it becomes normal

 ![32696661_10216307262900112_5821701536912244736_n](https://global.discourse-cdn.com/ionicframework/original/3X/6/9/69fe6a9b625a68e8ed94889cff92dda6b4e37e1a.jpg)

Same thing for the bottom.

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 15, 2018, 9:07pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/8 "2018-05-15T21:07:18Z")

</div>

Yes, it looks like the photos are cut off.

Its definitely related to an issue in your markup (.html), your code (.ts) or possibly your styles (.scss).

---

<div class="post-metadata">

**Author:** ![ddoudix](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@ddoudix](https://forum.ionicframework.com/u/ddoudix)\
**Post date:** [May 15, 2018, 9:08pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/9 "2018-05-15T21:08:31Z")

</div>

Do you have any suggestion ? because every app I create it, I got the same problem 😕

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:35pm UTC](https://forum.ionicframework.com/t/problem-with-top-margin/130465/10 "2021-07-19T21:35:36Z")

</div>