Margin/padding helpers

  • .m = margin
  • .p = padding
  • t/r/b/l = top/right/bottom/left
  • 0/0-5/1/2 = 0/0.5em/1em/2em

Examples:

.pt2 = padding-top: 2em.
.pl2 = padding-left: 2em.
.p1 = padding: 1em.
.pl1 + .pr1 = padding-left: 1em + padding-right: 1em.

Also available:

  • .mtauto = margin-left: auto.
  • .mrauto = margin-right: auto.
  • .mbauto = margin-bottom: auto.
  • .mlauto = margin-left: auto.
  • .mauto = margin: auto.
  • .center = .mlauto + .mrauto

This helps for positionning blocks or with flexbox.

For some very rare cases, we also have helpers in rem: .mt1r, mt0-5r, mr0-5r.

<div class="w50 mlauto">Right-aligned block</div>
Right-aligned block
<div class="w50 center">Centered block</div>
Centered block