Spacing
Margins
.m
.mt
.mb
.ml
.mr
.mx
.my
-sm
-md
-lg
-xl
-0
-01
-1
-2
-3
-4
-5
-auto
.m-01
Paddings
.p
.pt
.pb
.pl
.pr
.px
.py
-sm
-md
-lg
-xl
-0
-01
-1
-2
-3
-4
-5
.p-1
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