Margin
Margin utility classes:
| CSS Class | Description |
|---|---|
m{p}argin-4xs |
margin: var(--space-4xs); |
m{p}argin-3xs |
margin: var(--space-3xs); |
m{p}argin-2xs |
margin: var(--space-2xs); |
m{p}argin-xs |
margin: var(--space-xs); |
m{p}argin-sm |
margin: var(--space-sm); |
m{p}argin-md |
margin: var(--space-md); |
m{p}argin-lg |
margin: var(--space-lg); |
m{p}argin-xl |
margin: var(--space-xl); |
m{p}argin-2xl |
margin: var(--space-2xl); |
m{p}argin-3xl |
margin: var(--space-3xl); |
m{p}argin-4xl |
margin: var(--space-4xl); |
m{p}argin-auto |
margin: auto; |
m{p}argin-0 |
margin: 0; |
The margin values (--space-{value}) depends on the spacing scale.
Target a specific side using .margin-{side}-{size}:
| CSS Class | Description |
|---|---|
m{p}argin-top-xs |
margin-top: var(--space-xs); |
m{p}argin-bottom-xl |
margin-bottom: var(--space-xl); |
m{p}argin-right-auto |
margin-right: auto; |
m{p}argin-left-md |
margin-left: var(--space-md); |
Target left and right using .margin-x-{size}:
| CSS Class | Description |
|---|---|
m{p}argin-x-sm |
margin-left: var(--space-sm); margin-right: var(--space-sm); |
Target top and bottom using .margin-y-{size}:
| CSS Class | Description |
|---|---|
m{p}argin-y-md |
margin-top: var(--space-md); margin-bottom: var(--space-md); |
Responsive #
Edit the margin value at specific breakpoints by adding the @{breakpoint} suffix.
Example:
<div class="margin-md margin-auto@lg"><!-- content --></div>
