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>