Ionic Padding Ionic

How to add padding in Ionic Framework?

Ionic Framework provides classes which are used to add padding to the elements. All of the classes will add 10px between border of element and it's content. The padding classes provided by Ionic framework are:

Padding Classes

Class Name
Class Info
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.

How to use Padding in Ionic Framework?

One of the classes from the above table needs to be assigned to the element, for which padding needs to be applied. The example below displays two block buttons, the first one use the padding class and the second one do not use. It is noticed that first button is larger since it has 10px padding applied.

The screen produced by the above code appears as:

Ionic Padding

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ionic Topics