Spacing
All spacing is done using an 8px scale. Starting with n-half at 4px and going to n-16 at 128px.
Margins
Margin utilities are prefixed with m- and can be used to push other elements away from any side.
Use the convention m-size or m-side-size, e.g .m-1
or .m-bottom-1
. You can also use axis shortcuts: .m-x-1
for margin on the x axis only, or .m-y-1
for margin on the y axis only.
.m-half
.m-1
.m-2
.m-3
.m-4
.m-5
.m-6
.m-7
.m-8
.m-9
.m-10
.m-11
.m-12
.m-13
.m-14
.m-15
.m-16
Padding
Padding utilities are prefixed with p- and can be used to add space inside an element on any side.
Use the convention p-size or m-side-size, e.g .p-1
or .p-bottom-1
. You can also use axis shortcuts: .p-x-1
for padding on the x axis only, or .p-y-1
for padding on the y axis only.
.p-half
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
.p-7
.p-8
.p-9
.p-10
.p-11
.p-12
.p-13
.p-14
.p-15
.p-16
Responsive
All spacing classes are responsive and can use the __m and __l modifier classes, e.g p-top__m
.