Spacing
Margin and Padding
Assign 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.
Notation
The 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
Examples
Here 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;
}