Spacing
Margin
Utilities for controls margin (and negative margin) in 0.25rem increments.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
| margin-auto | margin: auto |
| margin-px | margin: 1px |
| margin-0 | margin: 0 |
| margin-1 | margin: 0.25rem |
| margin-2 | margin: 0.5rem |
| margin-3 | margin: 0.75rem |
| margin-4 | margin: 1rem |
| margin-5 | margin: 1.25rem |
| margin-6 | margin: 1.5rem |
| margin-8 | margin: 2rem |
| margin-10 | margin: 2.5rem |
| margin-12 | margin: 3rem |
| margin-16 | margin: 4rem |
| margin-20 | margin: 5rem |
| margin-24 | margin: 6rem |
| margin-32 | margin: 8rem |
| margin-40 | margin: 10rem |
| margin-48 | margin: 12rem |
| margin-56 | margin: 14rem |
| margin-64 | margin: 16rem |
| margin-72 | margin: 18rem |
| margin-80 | margin: 20rem |
| margin-88 | margin: 22rem |
| margin-96 | margin: 24rem |
| margin-104 | margin: 26rem |
| margin-112 | margin: 28rem |
| -margin-px | margin: -1px |
| -margin-1 | margin: -0.25rem |
| -margin-2 | margin: -0.5rem |
| -margin-3 | margin: -0.75rem |
| -margin-4 | margin: -1rem |
| -margin-5 | margin: -1.25rem |
| -margin-6 | margin: -1.5rem |
| -margin-8 | margin: -2rem |
| -margin-10 | margin: -2.5rem |
| -margin-12 | margin: -3rem |
| -margin-16 | margin: -4rem |
| -margin-20 | margin: -5rem |
| -margin-24 | margin: -6rem |
| -margin-32 | margin: -8rem |
| -margin-40 | margin: -10rem |
| -margin-48 | margin: -12rem |
| -margin-56 | margin: -14rem |
| -margin-64 | margin: -16rem |
| -margin-72 | margin: -18rem |
| -margin-80 | margin: -20rem |
| -margin-88 | margin: -22rem |
| -margin-96 | margin: -24rem |
| -margin-104 | margin: -26rem |
| -margin-112 | margin: -28rem |
| class | css |
|---|---|
| margin-x-auto | margin-right: auto; margin-left: auto |
| margin-x-px | margin-right: 1px; margin-left: 1px |
| margin-x-0 | margin-right: 0; margin-left: 0 |
| margin-x-1 | margin-right: 0.25rem; margin-left: 0.25rem |
| margin-x-2 | margin-right: 0.5rem; margin-left: 0.5rem |
| margin-x-3 | margin-right: 0.75rem; margin-left: 0.75rem |
| margin-x-4 | margin-right: 1rem; margin-left: 1rem |
| margin-x-5 | margin-right: 1.25rem; margin-left: 1.25rem |
| margin-x-6 | margin-right: 1.5rem; margin-left: 1.5rem |
| margin-x-8 | margin-right: 2rem; margin-left: 2rem |
| margin-x-10 | margin-right: 2.5rem; margin-left: 2.5rem |
| margin-x-12 | margin-right: 3rem; margin-left: 3rem |
| margin-x-16 | margin-right: 4rem; margin-left: 4rem |
| margin-x-20 | margin-right: 5rem; margin-left: 5rem |
| margin-x-24 | margin-right: 6rem; margin-left: 6rem |
| margin-x-32 | margin-right: 8rem; margin-left: 8rem |
| margin-x-40 | margin-right: 10rem; margin-left: 10rem |
| margin-x-48 | margin-right: 12rem; margin-left: 12rem |
| margin-x-56 | margin-right: 14rem; margin-left: 14rem |
| margin-x-64 | margin-right: 16rem; margin-left: 16rem |
| margin-x-72 | margin-right: 18rem; margin-left: 18rem |
| margin-x-80 | margin-right: 20rem; margin-left: 20rem |
| margin-x-88 | margin-right: 22rem; margin-left: 22rem |
| margin-x-96 | margin-right: 24rem; margin-left: 24rem |
| margin-x-104 | margin-right: 26rem margin-left: 26rem |
| margin-x-112 | margin-right: 28rem margin-left: 28rem |
| -margin-x-px | margin-right: -1px; margin-left: -1px |
| -margin-x-1 | margin-right: -0.25rem; margin-left: -0.25rem |
| -margin-x-2 | margin-right: -0.5rem; margin-left: -0.5rem |
| -margin-x-3 | margin-right: -0.75rem; margin-left: -0.75rem |
| -margin-x-4 | margin-right: -1rem; margin-left: -1rem |
| -margin-x-5 | margin-right: -1.25rem; margin-left: -1.25rem |
| -margin-x-6 | margin-right: -1.5rem; margin-left: -1.5rem |
| -margin-x-8 | margin-right: -2rem; margin-left: -2rem |
| -margin-x-10 | margin-right: -2.5rem; margin-left: -2.5rem |
| -margin-x-12 | margin-right: -3rem; margin-left: -3rem |
| -margin-x-16 | margin-right: -4rem; margin-left: -4rem |
| -margin-x-20 | margin-right: -5rem; margin-left: -5rem |
| -margin-x-24 | margin-right: -6rem; margin-left: -6rem |
| -margin-x-32 | margin-right: -8rem; margin-left: -8rem |
| -margin-x-40 | margin-right: -10rem; margin-left: -10rem |
| -margin-x-48 | margin-right: -12rem; margin-left: -12rem |
| -margin-x-56 | margin-right: -14rem; margin-left: -14rem |
| -margin-x-64 | margin-right: -16rem; margin-left: -16rem |
| -margin-x-72 | margin-right: -18rem; margin-left: -18rem |
| -margin-x-80 | margin-right: -20rem; margin-left: -20rem |
| -margin-x-88 | margin-right: -22rem; margin-left: -22rem |
| -margin-x-96 | margin-right: -24rem; margin-left: -24rem |
| -margin-x-104 | margin-right: -26rem; margin-left: -26rem |
| -margin-x-112 | margin-right: -28rem; margin-left: -28rem |
| class | css |
|---|---|
| margin-y-auto | margin-top: auto; margin-bottom: auto |
| margin-y-px | margin-top: 1px; margin-bottom: 1px |
| margin-y-0 | margin-top: 0; margin-bottom: 0 |
| margin-y-1 | margin-top: 0.25rem; margin-bottom: 0.25rem |
| margin-y-2 | margin-top: 0.5rem; margin-bottom: 0.5rem |
| margin-y-3 | margin-top: 0.75rem; margin-bottom: 0.75rem |
| margin-y-4 | margin-top: 1rem; margin-bottom: 1rem |
| margin-y-5 | margin-top: 1.25rem; margin-bottom: 1.25rem |
| margin-y-6 | margin-top: 1.5rem; margin-bottom: 1.5rem |
| margin-y-8 | margin-top: 2rem; margin-bottom: 2rem |
| margin-y-10 | margin-top: 2.5rem; margin-bottom: 2.5rem |
| margin-y-12 | margin-top: 3rem; margin-bottom: 3rem |
| margin-y-16 | margin-top: 4rem; margin-bottom: 4rem |
| margin-y-20 | margin-top: 5rem; margin-bottom: 5rem |
| margin-y-24 | margin-top: 6rem; margin-bottom: 6rem |
| margin-y-32 | margin-top: 8rem; margin-bottom: 8rem |
| margin-y-40 | margin-top: 10rem; margin-bottom: 10rem |
| margin-y-48 | margin-top: 12rem; margin-bottom: 12rem |
| margin-y-56 | margin-top: 14rem; margin-bottom: 14rem |
| margin-y-64 | margin-top: 16rem; margin-bottom: 16rem |
| margin-y-72 | margin-top: 18rem; margin-bottom: 18rem |
| margin-y-80 | margin-top: 20rem; margin-bottom: 20rem |
| margin-y-88 | margin-top: 22rem; margin-bottom: 22rem |
| margin-y-96 | margin-top: 24rem; margin-bottom: 24rem |
| margin-y-104 | margin-top: 26rem; margin-bottom: 26rem |
| margin-y-112 | margin-top: 28rem; margin-bottom: 28rem |
| -margin-y-px | margin-top: -1px; margin-bottom: -1px |
| -margin-y-1 | margin-top: -0.25rem; margin-bottom: -0.25rem |
| -margin-y-2 | margin-top: -0.5rem; margin-bottom: -0.5rem |
| -margin-y-3 | margin-top: -0.75rem; margin-bottom: -0.75rem |
| -margin-y-4 | margin-top: -1rem; margin-bottom: -1rem |
| -margin-y-5 | margin-top: -1.25rem; margin-bottom: -1.25rem |
| -margin-y-6 | margin-top: -1.5rem; margin-bottom: -1.5rem |
| -margin-y-8 | margin-top: -2rem; margin-bottom: -2rem |
| -margin-y-10 | margin-top: -2.5rem; margin-bottom: -2.5rem |
| -margin-y-12 | margin-top: -3rem; margin-bottom: -3rem |
| -margin-y-16 | margin-top: -4rem; margin-bottom: -4rem |
| -margin-y-20 | margin-top: -5rem; margin-bottom: -5rem |
| -margin-y-24 | margin-top: -6rem; margin-bottom: -6rem |
| -margin-y-32 | margin-top: -8rem; margin-bottom: -8rem |
| -margin-y-40 | margin-top: -10rem; margin-bottom: -10rem |
| -margin-y-48 | margin-top: -12rem; margin-bottom: -12rem |
| -margin-y-56 | margin-top: -14rem; margin-bottom: -14rem |
| -margin-y-64 | margin-top: -16rem; margin-bottom: -16rem |
| -margin-y-72 | margin-top: -18rem; margin-bottom: -18rem |
| -margin-y-80 | margin-top: -20rem; margin-bottom: -20rem |
| -margin-y-88 | margin-top: -22rem; margin-bottom: -22rem |
| -margin-y-96 | margin-top: -24rem; margin-bottom: -24rem |
| -margin-y-104 | margin-top: -26rem; margin-bottom: -26rem |
| -margin-y-112 | margin-top: -28rem; margin-bottom: -28rem |
| class | css |
|---|---|
| margin-t-auto | margin-top: auto |
| margin-t-px | margin-top: 1px |
| margin-t-0 | margin-top: 0 |
| margin-t-1 | margin-top: 0.25rem |
| margin-t-2 | margin-top: 0.5rem |
| margin-t-3 | margin-top: 0.75rem |
| margin-t-4 | margin-top: 1rem |
| margin-t-5 | margin-top: 1.25rem |
| margin-t-6 | margin-top: 1.5rem |
| margin-t-8 | margin-top: 2rem |
| margin-t-10 | margin-top: 2.5rem |
| margin-t-12 | margin-top: 3rem |
| margin-t-16 | margin-top: 4rem |
| margin-t-20 | margin-top: 5rem |
| margin-t-24 | margin-top: 6rem |
| margin-t-32 | margin-top: 8rem |
| margin-t-40 | margin-top: 10rem |
| margin-t-48 | margin-top: 12rem |
| margin-t-56 | margin-top: 14rem |
| margin-t-64 | margin-top: 16rem |
| margin-t-72 | margin-top: 18rem |
| margin-t-80 | margin-top: 20rem |
| margin-t-88 | margin-top: 22rem |
| margin-t-96 | margin-top: 24rem |
| margin-t-104 | margin-top: 26rem |
| margin-t-112 | margin-top: 28rem |
| -margin-t-px | margin-top: -1px |
| -margin-t-1 | margin-top: -0.25rem |
| -margin-t-2 | margin-top: -0.5rem |
| -margin-t-3 | margin-top: -0.75rem |
| -margin-t-4 | margin-top: -1rem |
| -margin-t-5 | margin-top: -1.25rem |
| -margin-t-6 | margin-top: -1.5rem |
| -margin-t-8 | margin-top: -2rem |
| -margin-t-10 | margin-top: -2.5rem |
| -margin-t-12 | margin-top: -3rem |
| -margin-t-16 | margin-top: -4rem |
| -margin-t-20 | margin-top: -5rem |
| -margin-t-24 | margin-top: -6rem |
| -margin-t-32 | margin-top: -8rem |
| -margin-t-40 | margin-top: -10rem |
| -margin-t-48 | margin-top: -12rem |
| -margin-t-56 | margin-top: -14rem |
| -margin-t-64 | margin-top: -16rem |
| -margin-t-72 | margin-top: -18rem |
| -margin-t-80 | margin-top: -20rem |
| -margin-t-88 | margin-top: -22rem |
| -margin-t-96 | margin-top: -24rem |
| -margin-t-104 | margin-top: -26rem |
| -margin-t-112 | margin-top: -28rem |
| class | css |
|---|---|
| margin-r-auto | margin-right: auto |
| margin-r-px | margin-right: 1px |
| margin-r-0 | margin-right: 0 |
| margin-r-1 | margin-right: 0.25rem |
| margin-r-2 | margin-right: 0.5rem |
| margin-r-3 | margin-right: 0.75rem |
| margin-r-4 | margin-right: 1rem |
| margin-r-5 | margin-right: 1.25rem |
| margin-r-6 | margin-right: 1.5rem |
| margin-r-8 | margin-right: 2rem |
| margin-r-10 | margin-right: 2.5rem |
| margin-r-12 | margin-right: 3rem |
| margin-r-16 | margin-right: 4rem |
| margin-r-20 | margin-right: 5rem |
| margin-r-24 | margin-right: 6rem |
| margin-r-32 | margin-right: 8rem |
| margin-r-40 | margin-right: 10rem |
| margin-r-48 | margin-right: 12rem |
| margin-r-56 | margin-right: 14rem |
| margin-r-64 | margin-right: 16rem |
| margin-r-72 | margin-right: 18rem |
| margin-r-80 | margin-right: 20rem |
| margin-r-88 | margin-right: 22rem |
| margin-r-96 | margin-right: 24rem |
| margin-r-104 | margin-right: 26rem |
| margin-r-112 | margin-right: 28rem |
| -margin-r-px | margin-right: -1px |
| -margin-r-1 | margin-right: -0.25rem |
| -margin-r-2 | margin-right: -0.5rem |
| -margin-r-3 | margin-right: -0.75rem |
| -margin-r-4 | margin-right: -1rem |
| -margin-r-5 | margin-right: -1.25rem |
| -margin-r-6 | margin-right: -1.5rem |
| -margin-r-8 | margin-right: -2rem |
| -margin-r-10 | margin-right: -2.5rem |
| -margin-r-12 | margin-right: -3rem |
| -margin-r-16 | margin-right: -4rem |
| -margin-r-20 | margin-right: -5rem |
| -margin-r-24 | margin-right: -6rem |
| -margin-r-32 | margin-right: -8rem |
| -margin-r-40 | margin-right: -10rem |
| -margin-r-48 | margin-right: -12rem |
| -margin-r-56 | margin-right: -14rem |
| -margin-r-64 | margin-right: -16rem |
| -margin-r-72 | margin-right: -18rem |
| -margin-r-80 | margin-right: -20rem |
| -margin-r-88 | margin-right: -22rem |
| -margin-r-96 | margin-right: -24rem |
| -margin-r-104 | margin-right: -26rem |
| -margin-r-112 | margin-right: -28rem |
| class | css |
|---|---|
| margin-b-auto | margin-bottom: auto |
| margin-b-px | margin-bottom: 1px |
| margin-b-0 | margin-bottom: 0 |
| margin-b-1 | margin-bottom: 0.25rem |
| margin-b-2 | margin-bottom: 0.5rem |
| margin-b-3 | margin-bottom: 0.75rem |
| margin-b-4 | margin-bottom: 1rem |
| margin-b-5 | margin-bottom: 1.25rem |
| margin-b-6 | margin-bottom: 1.5rem |
| margin-b-8 | margin-bottom: 2rem |
| margin-b-10 | margin-bottom: 2.5rem |
| margin-b-12 | margin-bottom: 3rem |
| margin-b-16 | margin-bottom: 4rem |
| margin-b-20 | margin-bottom: 5rem |
| margin-b-24 | margin-bottom: 6rem |
| margin-b-32 | margin-bottom: 8rem |
| margin-b-40 | margin-bottom: 10rem |
| margin-b-48 | margin-bottom: 12rem |
| margin-b-56 | margin-bottom: 14rem |
| margin-b-64 | margin-bottom: 16rem |
| margin-b-72 | margin-bottom: 18rem |
| margin-b-80 | margin-bottom: 20rem |
| margin-b-88 | margin-bottom: 22rem |
| margin-b-96 | margin-bottom: 24rem |
| margin-b-104 | margin-bottom: 26rem |
| margin-b-112 | margin-bottom: 28rem |
| -margin-b-px | margin-bottom: -1px |
| -margin-b-1 | margin-bottom: -0.25rem |
| -margin-b-2 | margin-bottom: -0.5rem |
| -margin-b-3 | margin-bottom: -0.75rem |
| -margin-b-4 | margin-bottom: -1rem |
| -margin-b-5 | margin-bottom: -1.25rem |
| -margin-b-6 | margin-bottom: -1.5rem |
| -margin-b-8 | margin-bottom: -2rem |
| -margin-b-10 | margin-bottom: -2.5rem |
| -margin-b-12 | margin-bottom: -3rem |
| -margin-b-16 | margin-bottom: -4rem |
| -margin-b-20 | margin-bottom: -5rem |
| -margin-b-24 | margin-bottom: -6rem |
| -margin-b-32 | margin-bottom: -8rem |
| -margin-b-40 | margin-bottom: -10rem |
| -margin-b-48 | margin-bottom: -12rem |
| -margin-b-56 | margin-bottom: -14rem |
| -margin-b-64 | margin-bottom: -16rem |
| -margin-b-72 | margin-bottom: -18rem |
| -margin-b-80 | margin-bottom: -20rem |
| -margin-b-88 | margin-bottom: -22rem |
| -margin-b-96 | margin-bottom: -24rem |
| -margin-b-104 | margin-bottom: -26rem |
| -margin-b-112 | margin-bottom: -28rem |
| class | css |
|---|---|
| margin-l-auto | margin-left: auto |
| margin-l-px | margin-left: 1px |
| margin-l-0 | margin-left: 0 |
| margin-l-1 | margin-left: 0.25rem |
| margin-l-2 | margin-left: 0.5rem |
| margin-l-3 | margin-left: 0.75rem |
| margin-l-4 | margin-left: 1rem |
| margin-l-5 | margin-left: 1.25rem |
| margin-l-6 | margin-left: 1.5rem |
| margin-l-8 | margin-left: 2rem |
| margin-l-10 | margin-left: 2.5rem |
| margin-l-12 | margin-left: 3rem |
| margin-l-16 | margin-left: 4rem |
| margin-l-20 | margin-left: 5rem |
| margin-l-24 | margin-left: 6rem |
| margin-l-32 | margin-left: 8rem |
| margin-l-40 | margin-left: 10rem |
| margin-l-48 | margin-left: 12rem |
| margin-l-56 | margin-left: 14rem |
| margin-l-64 | margin-left: 16rem |
| margin-l-72 | margin-left: 18rem |
| margin-l-80 | margin-left: 20rem |
| margin-l-88 | margin-left: 22rem |
| margin-l-96 | margin-left: 24rem |
| margin-l-104 | margin-left: 26rem |
| margin-l-112 | margin-left: 28rem |
| -margin-l-px | margin-left: -1px |
| -margin-l-1 | margin-left: -0.25rem |
| -margin-l-2 | margin-left: -0.5rem |
| -margin-l-3 | margin-left: -0.75rem |
| -margin-l-4 | margin-left: -1rem |
| -margin-l-5 | margin-left: -1.25rem |
| -margin-l-6 | margin-left: -1.5rem |
| -margin-l-8 | margin-left: -2rem |
| -margin-l-10 | margin-left: -2.5rem |
| -margin-l-12 | margin-left: -3rem |
| -margin-l-16 | margin-left: -4rem |
| -margin-l-20 | margin-left: -5rem |
| -margin-l-24 | margin-left: -6rem |
| -margin-l-32 | margin-left: -8rem |
| -margin-l-40 | margin-left: -10rem |
| -margin-l-48 | margin-left: -12rem |
| -margin-l-56 | margin-left: -14rem |
| -margin-l-64 | margin-left: -16rem |
| -margin-l-72 | margin-left: -18rem |
| -margin-l-80 | margin-left: -20rem |
| -margin-l-88 | margin-left: -22rem |
| -margin-l-96 | margin-left: -24rem |
| -margin-l-104 | margin-left: -26rem |
| -margin-l-112 | margin-left: -28rem |
Usage
Set margin to top, bottom, left and right.
<div class="margin-6">
...
</div>
HTML
.dummy {
@extend
.margin-6;
}
SCSS
Set margin to left and right.
<div class="margin-x-6">
...
</div>
HTML
.dummy {
@extend
.margin-x-6;
}
SCSS
Set margin to top and bottom.
<div class="margin-y-6">
...
</div>
HTML
.dummy {
@extend
.margin-y-6;
}
SCSS
Set margin to top.
<div class="margin-t-6">
...
</div>
HTML
.dummy {
.margin-t-6;
}
SCSS
Set margin to bottom.
<div class="margin-b-6">
...
</div>
HTML
.dummy {
@extend
.margin-b-6;
}
SCSS
Set margin to left.
<div class="margin-l-6">
...
</div>
HTML
.dummy {
@extend
.margin-l-6;
}
SCSS
Set margin to right.
<div class="margin-r-6">
...
</div>
HTML
.dummy {
@extend
.margin-r-6;
}
SCSS
Use (expand) variant to apply margin to all child elements.
<div class="(expand)margin-6">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
HTML
.dummy {
@extend
.(expand)margin-6;
}
SCSS