Ionic - Padding

Advertisements

Previous Page
Next Page  

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

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.

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 applied.

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

The above code will produce the following screen −

Ionic Padding
Advertisements