Ionic 5 content padding is not working like Ionic 4?

Share : Answer for Ionic 5 content padding is not working like Ionic 4?

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.

A second fix is to replace all your attributes to CSS classes:

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

 

Skip to toolbar