Search code examples
ionic-frameworkionic5

Why Ionic 5 content padding is not working?

When upgraded to Ionic 5, the padding attribute is not working anymore as in Ionic 4:

<ion-content color="primary" padding></ion-content>

Any fixes?

Solution

  • According to the official documentation, you can use these CSS custom properties to set padding of ion-content component:

    --padding-bottom Bottom padding of the content

    --padding-end Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content

    --padding-start Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content

    --padding-top Top padding of the content

    In the SCSS file associated with your component, add:

    ion-content {
  --padding-bottom: 10px;
  --padding-end: 10px;
  --padding-start: 20px;
  --padding-top: 20px;
}

    This should add padding inside the content area.