How to vertically offset a component


#1

Hello, this must be a stupid question, but I am so surprised that I just cannot google anything on the subject…

I am new to Ionic and I am trying to find a way to increase the vertical distance of the components, because by default they seem to be to squeezed together even though the rest of the page is empty.

On my page I have just a couple of ion-inputs and a ion-button, and the button is just too close to the input above.

I found out that I can add in between, but that creates that separator line which I don’t want to be there.

Thanks…


#2

You can use padding to seperate your components, for example:

.html:

  <div class="segment-container">

    <ion-segment color="primary" [(ngModel)]="auth">
      <ion-segment-button value="sign-in">
        <strong>Sign In</strong>
      </ion-segment-button>
      <ion-segment-button value="sign-up">
        <strong>Sign Up</strong>
      </ion-segment-button>
    </ion-segment>

  </div>

.scss:

    .segment-container {
      padding-bottom: 16px;
    }


#3

Thanks, that works. I keep forgetting that it’s still a web… :slight_smile: