Ionic - Padding

Ionic offers an easy way to add padding to elements. There are couple of classes that can be used and all of them will add 10px between border of element and its content. The following table displays all the available padding classes.

Padding Classes

Using Padding

When you want to apply some padding to your element, you just need to assign one of the classes from the table above. The following example shows two block buttons. The first one is using the padding class and the second one does not. You will notice that the first button is larger, since it has 10px padding appped.

<span class = "button button-block padding">Padding</span>
<span class = "button button-block">No padding</span>

The above code will produce the following screen −