Spacing - Padding
You can browse this page to learn the padding properties of the template.
To make it easier to edit the template, we thought to minimize the use of CSS or SCSS. For this, we have created some predefined padding classes.
We have separated the padding classes with 3 letters and a middle line for easy understanding and use. The first part represents the word "padding", the second part represents the direction, and the last part represents the unit. Accordingly, a template such as {padding}-{direction}-{unit} appears. All fields where you use the p-l-20 class in HTML padding-left: 20px; It has CSS feature.
The created predefined classes start from 0 and increase by 10 and continue up to 200.
Examples (All Directions)
.p-20
.p-30
.p-40
<div class="p-20">.p-20</div>
<div class="p-30">.p-30</div>
<div class="p-40">.p-40</div>
Examples (Right)
.p-r-20
.p-r-50
.p-r-100
<div class="p-r-20">.p-r-20</div>
<div class="p-r-50">.p-r-50</div>
<div class="p-r-100">.p-r-100</div>
Examples (Left)
.p-l-20
.p-l-50
.p-l-100
<div class="p-l-20">.p-l-20</div>
<div class="p-l-50">.p-l-50</div>
<div class="p-l-100">.p-l-100</div>
Examples (Bottom)
.p-b-20
.p-b-50
.p-b-100
<div class="p-b-20">.p-b-20</div>
<div class="p-b-50">.p-b-50</div>
<div class="p-b-100">.p-b-100</div>
Examples (Top)
.p-t-20
.p-t-50
.p-t-100
<div class="p-t-20">.p-t-20</div>
<div class="p-t-50">.p-t-50</div>
<div class="p-t-100">.p-t-100</div>