Ionic - Padding
Advertisements
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 −
Advertisements
