Spacing - Margin

You can browse this page to learn the margin 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 margin classes.

We have separated the margin classes with 3 letters and a middle line for easy understanding and use. The first part represents the word "margin", the second part represents the direction, and the last part represents the unit. Accordingly, a template such as {margin}-{direction}-{unit} appears. All fields where you use the m-l-20 class in HTML margin-left: 20px; It has CSS feature.

The created predefined classes start from 0 and increase by 10 and continue up to 200.

Examples (Right)

								
<div class="m-r-20">.m-r-20</div>
<div class="m-r-50">.m-r-50</div>
<div></div>
								
							

Examples (Left)

								
<div class="m-l-20">.m-l-20</div>
<div class="m-l-50">.m-l-50</div>
<div class="m-l-30">.m-l-30</div>
								
							

Examples (Bottom)

								
<div class="m-b-20">.m-b-20</div>
<div class="m-b-50">.m-b-50</div>
<div></div>
								
							

Examples (Top)

								
<div class="m-t-20">.m-t-20</div>
<div class="m-t-50">.m-t-50</div>
<div class="m-t-30">.m-t-30</div>