On this page
Margin
Naming convention
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.
| Shorthand | Description |
|---|---|
| m | margin |
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | horizontal, left & right |
| y | vertical, top & bottom |
| 0 | 0 |
| 1 | 4px |
| 2 | 8px |
| 3 | 16px |
| 4 | 24px |
| 5 | 32px |
| 6 | 40px |
| 7 | 48px |
| 8 | 64px |
| 9 | 80px |
| 10 | 96px |
| 11 | 112px |
| 12 | 128px |
Uniform margins
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.
Directional margins
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.
Extended vertical margins
The extended scale starts from spacer 7 up to 12. Note: Only the y-axis (mt, mb and my) and its responsive variants are supported.
Center elements
Use 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
Reset margins built into typography elements or other components with m-0, mt-0, mr-0, mb-0, ml-0, mx-0, and my-0.
Responsive margins
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.
Negative margins
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: m[direction]-n[spacer], where spacer runs from 1 to 6. This also works responsively, with the following formula: m[direction]-[breakpoint]-n[spacer].
Extended negative margins
You can use the extended spacing scale for top and bottom margins, ranging from 1 to 12.