Space
Control margin and padding with the space
trait which
follows the format {type}{side}:{size}
- type -
{p = padding | m = margin}
, - side -
{t = top | r = right | b = bottom | l = left}
- size -
{0-8, multiplier is 4}
Special cases:
- side -
{x = left and right | y = top and bottom}
- size -
{ auto = set margin to auto }
<!-- SPACING ON ALL SIDES (p = padding, m = margin) -->
<div pam-space="p">Padding on all sides</div>
<!-- SPACING ON TWO SIDES (x = lef and right, y = top and bottom) -->
<div pam-space="px">Padding on left and right side</div>
<!-- SPACING ON ONE SIDE (t = top, r = right, b = bottom, l = left) -->
<div pam-space="pt">Padding on the top side</div>
<!-- SPACING SIZE ({0-8}, multiplier of 4) -->
<div pam-space="p:0">Padding 0 on all sides</div>
<div pam-space="p:2">Size 2 padding on all sides</div>
<div pam-space="pl:2">Size 2 padding on left side</div>
<!-- AUTO -->
<div pam-space="m:auto">Margin auto on left and right side</div>
<!-- NONE -->
<div pam-space="none">Margin 0 and Padding 0 on all sides</div>
<div pam-space="m:0">Margin 0 on left and right side</div>