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