Content of ion-content is padded automatically


#1

I have a problem with the content of . The content is padded automatically and I can’t leave the content on top of the .

This is the .html

<ion-header class="header-profile">
  <ion-toolbar class="bar-profile">
    <ion-item no-lines class="item-bar-profile">
      <ion-avatar >
        <img class="centered" src="./assets/img/pio.jpg">
      </ion-avatar>
      <span class="user-title centered">Don Pio</span>
      <span class="user-info centered">Alboraya. Spain</span>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content class="content-profile">
  <div>
    <ion-segment [(ngModel)]="profile">
      <ion-segment-button value="info">
        Perfil
      </ion-segment-button>
      <ion-segment-button value="config">
        Configuración
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="profile">

    <ion-list *ngSwitchCase="'info'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="./assets/img/pio.jpg">
        </ion-thumbnail>
        <h2>Ruby</h2>
      </ion-item>

    </ion-list>

    <ion-list *ngSwitchCase="'config'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="./assets/img/pio.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

And this is the .scss style sheet

 page-profile {

      ion-avatar img {
        width: 80px !important;
        height: 80px !important;
      }

      .user-title {
        color: white;
        font-size: large;
        font-weight: bold;
      }
      .user-info{
        color: white;
        font-size: smaller;
      }
      .centered{
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
      }

      .header-profile{
        height: 150px;
      }

      .bar-profile{
        height: 150px;
      }

      .bar-profile .toolbar-background {

        background-size: cover;
        background-image: url('../assets/img/pio.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-color: black;
        opacity: .5;
      }

      .item-bar-profile{
        background-color: transparent;
      }
      .content-profile{
        top:150px;
        background-color: lightgrey;
      }
    }

This is a screenshot to see how the segment is padded to center.

What would be wrong?


#2

It doesn’t look like content has padding on it at all. If you can provide a plunker that reproduces it I could tell you where the styles are coming from, but it’s hard to look at a picture and tell.