Spacing
#
Margin and PaddingAssign margin
or padding
values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.
#
NotationThe classes are named using the format {property}--{size}
and {property}-{side}--{size}
.
property
is one of:
margin
padding
side
is one of:
top
- for classes that setmargin-top
orpadding-top
left
- for classes that setmargin-left
orpadding-left
bottom
- for classes that setmargin-bottom
orpadding-bottom
right
- for classes that setmargin-right
orpadding-right
vert
- for classes that set both*-top
and*-bottom
horiz
- for classes that set both*-left
and*-right
size
is one of:
none
- for classes that eliminatemargin
orpadding
by setting it to0
xs
- for classes that set themargin
orpadding
to0.25rem
sm
- for classes that set themargin
orpadding
to0.5rem
md
- for classes that set themargin
orpadding
to1rem
lg
- for classes that set themargin
orpadding
to2rem
xl
- for classes that set themargin
orpadding
to5rem
#
ExamplesHere are some representative examples of these classes:
.margin-top--none { margin-top: 0 !important;}
.margin-left--xs { margin-left: 0.25rem !important;}
.padding-vert--md { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;}
.padding--lg { padding: 2rem !important;}