Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
|x||horizontal, left & right|
|y||vertical, top & bottom|
Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.
The extended scale starts from spacer
7 up to
12. Note: Only the y-axis (
my) and its responsive variants are supported.
mx-autoto center block elements with a set width.
We also provide directional margin auto.
mt-auto, mr-auto, mb-auto, ml-auto
Reset margins built into typography elements or other components with
All margin utilities can be adjusted per breakpoint using the following formula:
m[direction]-[breakpoint]-[spacer]. Each responsive style is applied to the specified breakpoint and up.
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is:
spacer runs from
6. This also works responsively, with the following formula:
You can use the extended spacing scale for
bottom margins, ranging from