Why Ionic 5 content padding is not working?

Issue

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.

Answered By - Ahmed At Techiediaries