Spacing
Margin
Utilities for controlling an element's margin.
Quick reference
| Class | Properties |
|---|---|
| m-0 | margin: 0rem; |
| m-1 | margin: 0.0625rem; |
| m-2 | margin: 0.125rem; |
| m-4 | margin: 0.25rem; |
| m-8 | margin: 0.5rem; |
| m-12 | margin: 0.75rem; |
| m-16 | margin: 1rem; |
| m-20 | margin: 1.25rem; |
| m-24 | margin: 1.5rem; |
| m-32 | margin: 2rem; |
| m-48 | margin: 3rem; |
| m-64 | margin: 4rem; |
| m-96 | margin: 6rem; |
| mt-0 | margin-top: 0rem; |
| mt-1 | margin-top: 0.0625rem; |
| mt-2 | margin-top: 0.125rem; |
| mt-4 | margin-top: 0.25rem; |
| mt-8 | margin-top: 0.5rem; |
| mt-12 | margin-top: 0.75rem; |
| mt-16 | margin-top: 1rem; |
| mt-20 | margin-top: 1.25rem; |
| mt-24 | margin-top: 1.5rem; |
| mt-32 | margin-top: 2rem; |
| mt-48 | margin-top: 3rem; |
| mt-64 | margin-top: 4rem; |
| mt-96 | margin-top: 6rem; |
| ml-0 | margin-left: 0rem; |
| ml-1 | margin-left: 0.0625rem; |
| ml-2 | margin-left: 0.125rem; |
| ml-4 | margin-left: 0.25rem; |
| ml-8 | margin-left: 0.5rem; |
| ml-12 | margin-left: 0.75rem; |
| ml-16 | margin-left: 1rem; |
| ml-20 | margin-left: 1.25rem; |
| ml-24 | margin-left: 1.5rem; |
| ml-32 | margin-left: 2rem; |
| ml-48 | margin-left: 3rem; |
| ml-64 | margin-left: 4rem; |
| ml-96 | margin-left: 6rem; |
| mb-0 | margin-bottom: 0rem; |
| mb-1 | margin-bottom: 0.0625rem; |
| mb-2 | margin-bottom: 0.125rem; |
| mb-4 | margin-bottom: 0.25rem; |
| mb-8 | margin-bottom: 0.5rem; |
| mb-12 | margin-bottom: 0.75rem; |
| mb-16 | margin-bottom: 1rem; |
| mb-20 | margin-bottom: 1.25rem; |
| mb-24 | margin-bottom: 1.5rem; |
| mb-32 | margin-bottom: 2rem; |
| mb-48 | margin-bottom: 3rem; |
| mb-64 | margin-bottom: 4rem; |
| mb-96 | margin-bottom: 6rem; |
| mr-0 | margin-right: 0rem; |
| mr-1 | margin-right: 0.0625rem; |
| mr-2 | margin-right: 0.125rem; |
| mr-4 | margin-right: 0.25rem; |
| mr-8 | margin-right: 0.5rem; |
| mr-12 | margin-right: 0.75rem; |
| mr-16 | margin-right: 1rem; |
| mr-20 | margin-right: 1.25rem; |
| mr-24 | margin-right: 1.5rem; |
| mr-32 | margin-right: 2rem; |
| mr-48 | margin-right: 3rem; |
| mr-64 | margin-right: 4rem; |
| mr-96 | margin-right: 6rem; |
| mx-0 | margin-left: 0rem; margin-right: 0rem; |
| mx-1 | margin-left: 0.0625rem; margin-right: 0.0625rem; |
| mx-2 | margin-left: 0.125rem; margin-right: 0.125rem; |
| mx-4 | margin-left: 0.25rem; margin-right: 0.25rem; |
| mx-8 | margin-left: 0.5rem; margin-right: 0.5rem; |
| mx-12 | margin-left: 0.75rem; margin-right: 0.75rem; |
| mx-16 | margin-left: 1rem; margin-right: 1rem; |
| mx-20 | margin-left: 1.25rem; margin-right: 1.25rem; |
| mx-24 | margin-left: 1.5rem; margin-right: 1.5rem; |
| mx-32 | margin-left: 2rem; margin-right: 2rem; |
| mx-48 | margin-left: 3rem; margin-right: 3rem; |
| mx-64 | margin-left: 4rem; margin-right: 4rem; |
| mx-96 | margin-left: 6rem; margin-right: 6rem; |
| my-0 | margin-top: 0rem; margin-bottom: 0rem; |
| my-1 | margin-top: 0.0625rem; margin-bottom: 0.0625rem; |
| my-2 | margin-top: 0.125rem; margin-bottom: 0.125rem; |
| my-4 | margin-top: 0.25rem; margin-bottom: 0.25rem; |
| my-8 | margin-top: 0.5rem; margin-bottom: 0.5rem; |
| my-12 | margin-top: 0.75rem; margin-bottom: 0.75rem; |
| my-16 | margin-top: 1rem; margin-bottom: 1rem; |
| my-20 | margin-top: 1.25rem; margin-bottom: 1.25rem; |
| my-24 | margin-top: 1.5rem; margin-bottom: 1.5rem; |
| my-32 | margin-top: 2rem; margin-bottom: 2rem; |
| my-48 | margin-top: 3rem; margin-bottom: 3rem; |
| my-64 | margin-top: 4rem; margin-bottom: 4rem; |
| my-96 | margin-top: 6rem; margin-bottom: 6rem; |
Basic usage
Control the margin on one side of an element using the m{t|r|b|l|x|y}-{$spacing} utilities. All sides support auto value as well, e.g. m-auto.
Customization
$spacing values can be configured using theme.spacing.
Table of Contents