Padding

Many components in Ionic purposely have both padding and margin reset set to zero. In many instances apps will have components bleed to the edge of the screen, and by starting each component at zero developers can easily control padding and margins throughout the app.

The padding utility classes can be reused to give any element's content some breathing room, meaning it adds a default 10px between the outer box of the element and its inner content. The following classes are not required for any element, but may be helpful with your layout.

  • padding Adds padding around every side.
  • padding-vertical Adds padding to the top and bottom.
  • padding-horizontal Adds padding to the left and right.
  • padding-top Adds padding to the top.
  • padding-right Adds padding to the right.
  • padding-bottom Adds padding to the bottom.
  • padding-left Adds padding to the left.