Spacing
Modify your website appearance with
wide range of margin and padding utility classes.
In Scratch all the padding and margin
utilities use rem unit.
The padding and margin utilties are
created ranging from 0.25rem to 5rem.
Notation
The classes are named with the following format :
[property]-[side(if required)]-[size]
Here the properties are .m for margin and .p for padding.
If the side is not mentioned then the padding and margin will applied on all the
sides of the element.
{t} is used To set margin-top and padding-top.
{b} is used To set margin-bottom and padding-bottom.
{r} is used To set margin-right and padding-right.
{l} is used To set margin-left and padding-left.
margin can also be set to auto by adding m-auto
class.
The size range from 0.25rem to 5rem where 0.25 is '1' , 0.5
is '2',0.75 is '3' and so on.
Example
<div class="... m-l-8">
<p class="p-8">I am a container!</p>
</div>
<div class="... m-l-10 m-r-10">
<p class="p-8">I am a container!</p>
</div>
