Spacing

Margins

prop
.m
.mt
.mb
.ml
.mr
.mx
.my
[breakpoint]
-sm
-md
-lg
-xl
value
-0
-01
-1
-2
-3
-4
-5
-auto
result
.m-01
Item
.m-01
Item

Paddings

prop
.p
.pt
.pb
.pl
.pr
.px
.py
[breakpoint]
-sm
-md
-lg
-xl
value
-0
-01
-1
-2
-3
-4
-5
result
.p-1
Item
.p-1
Item

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where sides is one of:

mt, pt — for classes that set margin-top or padding-top
mb, pb — for classes that set margin-bottom or padding-bottom
ml, pl — for classes that set margin-left or padding-left
mr, pr — for classes that set margin-right or padding-right
mx, px — for classes that set both *-left and *-right
my, py — for classes that set both *-top and *-bottom

0 — for classes that eliminate the margin or padding by setting it to 0
01 — (by default) for classes that set the margin or padding to 1 grid unit
1 — (by default) for classes that set the margin or padding to 1 line-height
2 — (by default) for classes that set the margin or padding to 2 line-height
3 — (by default) for classes that set the margin or padding to 3 line-height
4 — (by default) for classes that set the margin or padding to 4 line-height
auto — for classes that set the margin to auto


Grid