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

classcss
margin-automargin: auto
margin-pxmargin: 1px
margin-0margin: 0
margin-1margin: 0.25rem
margin-2margin: 0.5rem
margin-3margin: 0.75rem
margin-4margin: 1rem
margin-5margin: 1.25rem
margin-6margin: 1.5rem
margin-8margin: 2rem
margin-10margin: 2.5rem
margin-12margin: 3rem
margin-16margin: 4rem
margin-20margin: 5rem
margin-24margin: 6rem
margin-32margin: 8rem
margin-40margin: 10rem
margin-48margin: 12rem
margin-56margin: 14rem
margin-64margin: 16rem
margin-72margin: 18rem
margin-80margin: 20rem
margin-88margin: 22rem
margin-96margin: 24rem
margin-104margin: 26rem
margin-112margin: 28rem
-margin-pxmargin: -1px
-margin-1margin: -0.25rem
-margin-2margin: -0.5rem
-margin-3margin: -0.75rem
-margin-4margin: -1rem
-margin-5margin: -1.25rem
-margin-6margin: -1.5rem
-margin-8margin: -2rem
-margin-10margin: -2.5rem
-margin-12margin: -3rem
-margin-16margin: -4rem
-margin-20margin: -5rem
-margin-24margin: -6rem
-margin-32margin: -8rem
-margin-40margin: -10rem
-margin-48margin: -12rem
-margin-56margin: -14rem
-margin-64margin: -16rem
-margin-72margin: -18rem
-margin-80margin: -20rem
-margin-88margin: -22rem
-margin-96margin: -24rem
-margin-104margin: -26rem
-margin-112margin: -28rem
classcss
margin-x-automargin-right: auto;
margin-left: auto
margin-x-pxmargin-right: 1px;
margin-left: 1px
margin-x-0margin-right: 0;
margin-left: 0
margin-x-1margin-right: 0.25rem;
margin-left: 0.25rem
margin-x-2margin-right: 0.5rem;
margin-left: 0.5rem
margin-x-3margin-right: 0.75rem;
margin-left: 0.75rem
margin-x-4margin-right: 1rem;
margin-left: 1rem
margin-x-5margin-right: 1.25rem;
margin-left: 1.25rem
margin-x-6margin-right: 1.5rem;
margin-left: 1.5rem
margin-x-8margin-right: 2rem;
margin-left: 2rem
margin-x-10margin-right: 2.5rem;
margin-left: 2.5rem
margin-x-12margin-right: 3rem;
margin-left: 3rem
margin-x-16margin-right: 4rem;
margin-left: 4rem
margin-x-20margin-right: 5rem;
margin-left: 5rem
margin-x-24margin-right: 6rem;
margin-left: 6rem
margin-x-32margin-right: 8rem;
margin-left: 8rem
margin-x-40margin-right: 10rem;
margin-left: 10rem
margin-x-48margin-right: 12rem;
margin-left: 12rem
margin-x-56margin-right: 14rem;
margin-left: 14rem
margin-x-64margin-right: 16rem;
margin-left: 16rem
margin-x-72margin-right: 18rem;
margin-left: 18rem
margin-x-80margin-right: 20rem;
margin-left: 20rem
margin-x-88margin-right: 22rem;
margin-left: 22rem
margin-x-96margin-right: 24rem;
margin-left: 24rem
margin-x-104margin-right: 26rem
margin-left: 26rem
margin-x-112margin-right: 28rem
margin-left: 28rem
-margin-x-pxmargin-right: -1px;
margin-left: -1px
-margin-x-1margin-right: -0.25rem;
margin-left: -0.25rem
-margin-x-2margin-right: -0.5rem;
margin-left: -0.5rem
-margin-x-3margin-right: -0.75rem;
margin-left: -0.75rem
-margin-x-4margin-right: -1rem;
margin-left: -1rem
-margin-x-5margin-right: -1.25rem;
margin-left: -1.25rem
-margin-x-6margin-right: -1.5rem;
margin-left: -1.5rem
-margin-x-8margin-right: -2rem;
margin-left: -2rem
-margin-x-10margin-right: -2.5rem;
margin-left: -2.5rem
-margin-x-12margin-right: -3rem;
margin-left: -3rem
-margin-x-16margin-right: -4rem;
margin-left: -4rem
-margin-x-20margin-right: -5rem;
margin-left: -5rem
-margin-x-24margin-right: -6rem;
margin-left: -6rem
-margin-x-32margin-right: -8rem;
margin-left: -8rem
-margin-x-40margin-right: -10rem;
margin-left: -10rem
-margin-x-48margin-right: -12rem;
margin-left: -12rem
-margin-x-56margin-right: -14rem;
margin-left: -14rem
-margin-x-64margin-right: -16rem;
margin-left: -16rem
-margin-x-72margin-right: -18rem;
margin-left: -18rem
-margin-x-80margin-right: -20rem;
margin-left: -20rem
-margin-x-88margin-right: -22rem;
margin-left: -22rem
-margin-x-96margin-right: -24rem;
margin-left: -24rem
-margin-x-104margin-right: -26rem;
margin-left: -26rem
-margin-x-112margin-right: -28rem;
margin-left: -28rem
classcss
margin-y-automargin-top: auto;
margin-bottom: auto
margin-y-pxmargin-top: 1px;
margin-bottom: 1px
margin-y-0margin-top: 0;
margin-bottom: 0
margin-y-1margin-top: 0.25rem;
margin-bottom: 0.25rem
margin-y-2margin-top: 0.5rem;
margin-bottom: 0.5rem
margin-y-3margin-top: 0.75rem;
margin-bottom: 0.75rem
margin-y-4margin-top: 1rem;
margin-bottom: 1rem
margin-y-5margin-top: 1.25rem;
margin-bottom: 1.25rem
margin-y-6margin-top: 1.5rem;
margin-bottom: 1.5rem
margin-y-8margin-top: 2rem;
margin-bottom: 2rem
margin-y-10margin-top: 2.5rem;
margin-bottom: 2.5rem
margin-y-12margin-top: 3rem;
margin-bottom: 3rem
margin-y-16margin-top: 4rem;
margin-bottom: 4rem
margin-y-20margin-top: 5rem;
margin-bottom: 5rem
margin-y-24margin-top: 6rem;
margin-bottom: 6rem
margin-y-32margin-top: 8rem;
margin-bottom: 8rem
margin-y-40margin-top: 10rem;
margin-bottom: 10rem
margin-y-48margin-top: 12rem;
margin-bottom: 12rem
margin-y-56margin-top: 14rem;
margin-bottom: 14rem
margin-y-64margin-top: 16rem;
margin-bottom: 16rem
margin-y-72margin-top: 18rem;
margin-bottom: 18rem
margin-y-80margin-top: 20rem;
margin-bottom: 20rem
margin-y-88margin-top: 22rem;
margin-bottom: 22rem
margin-y-96margin-top: 24rem;
margin-bottom: 24rem
margin-y-104margin-top: 26rem;
margin-bottom: 26rem
margin-y-112margin-top: 28rem;
margin-bottom: 28rem
-margin-y-pxmargin-top: -1px;
margin-bottom: -1px
-margin-y-1margin-top: -0.25rem;
margin-bottom: -0.25rem
-margin-y-2margin-top: -0.5rem;
margin-bottom: -0.5rem
-margin-y-3margin-top: -0.75rem;
margin-bottom: -0.75rem
-margin-y-4margin-top: -1rem;
margin-bottom: -1rem
-margin-y-5margin-top: -1.25rem;
margin-bottom: -1.25rem
-margin-y-6margin-top: -1.5rem;
margin-bottom: -1.5rem
-margin-y-8margin-top: -2rem;
margin-bottom: -2rem
-margin-y-10margin-top: -2.5rem;
margin-bottom: -2.5rem
-margin-y-12margin-top: -3rem;
margin-bottom: -3rem
-margin-y-16margin-top: -4rem;
margin-bottom: -4rem
-margin-y-20margin-top: -5rem;
margin-bottom: -5rem
-margin-y-24margin-top: -6rem;
margin-bottom: -6rem
-margin-y-32margin-top: -8rem;
margin-bottom: -8rem
-margin-y-40margin-top: -10rem;
margin-bottom: -10rem
-margin-y-48margin-top: -12rem;
margin-bottom: -12rem
-margin-y-56margin-top: -14rem;
margin-bottom: -14rem
-margin-y-64margin-top: -16rem;
margin-bottom: -16rem
-margin-y-72margin-top: -18rem;
margin-bottom: -18rem
-margin-y-80margin-top: -20rem;
margin-bottom: -20rem
-margin-y-88margin-top: -22rem;
margin-bottom: -22rem
-margin-y-96margin-top: -24rem;
margin-bottom: -24rem
-margin-y-104margin-top: -26rem;
margin-bottom: -26rem
-margin-y-112margin-top: -28rem;
margin-bottom: -28rem
classcss
margin-t-automargin-top: auto
margin-t-pxmargin-top: 1px
margin-t-0margin-top: 0
margin-t-1margin-top: 0.25rem
margin-t-2margin-top: 0.5rem
margin-t-3margin-top: 0.75rem
margin-t-4margin-top: 1rem
margin-t-5margin-top: 1.25rem
margin-t-6margin-top: 1.5rem
margin-t-8margin-top: 2rem
margin-t-10margin-top: 2.5rem
margin-t-12margin-top: 3rem
margin-t-16margin-top: 4rem
margin-t-20margin-top: 5rem
margin-t-24margin-top: 6rem
margin-t-32margin-top: 8rem
margin-t-40margin-top: 10rem
margin-t-48margin-top: 12rem
margin-t-56margin-top: 14rem
margin-t-64margin-top: 16rem
margin-t-72margin-top: 18rem
margin-t-80margin-top: 20rem
margin-t-88margin-top: 22rem
margin-t-96margin-top: 24rem
margin-t-104margin-top: 26rem
margin-t-112margin-top: 28rem
-margin-t-pxmargin-top: -1px
-margin-t-1margin-top: -0.25rem
-margin-t-2margin-top: -0.5rem
-margin-t-3margin-top: -0.75rem
-margin-t-4margin-top: -1rem
-margin-t-5margin-top: -1.25rem
-margin-t-6margin-top: -1.5rem
-margin-t-8margin-top: -2rem
-margin-t-10margin-top: -2.5rem
-margin-t-12margin-top: -3rem
-margin-t-16margin-top: -4rem
-margin-t-20margin-top: -5rem
-margin-t-24margin-top: -6rem
-margin-t-32margin-top: -8rem
-margin-t-40margin-top: -10rem
-margin-t-48margin-top: -12rem
-margin-t-56margin-top: -14rem
-margin-t-64margin-top: -16rem
-margin-t-72margin-top: -18rem
-margin-t-80margin-top: -20rem
-margin-t-88margin-top: -22rem
-margin-t-96margin-top: -24rem
-margin-t-104margin-top: -26rem
-margin-t-112margin-top: -28rem
classcss
margin-r-automargin-right: auto
margin-r-pxmargin-right: 1px
margin-r-0margin-right: 0
margin-r-1margin-right: 0.25rem
margin-r-2margin-right: 0.5rem
margin-r-3margin-right: 0.75rem
margin-r-4margin-right: 1rem
margin-r-5margin-right: 1.25rem
margin-r-6margin-right: 1.5rem
margin-r-8margin-right: 2rem
margin-r-10margin-right: 2.5rem
margin-r-12margin-right: 3rem
margin-r-16margin-right: 4rem
margin-r-20margin-right: 5rem
margin-r-24margin-right: 6rem
margin-r-32margin-right: 8rem
margin-r-40margin-right: 10rem
margin-r-48margin-right: 12rem
margin-r-56margin-right: 14rem
margin-r-64margin-right: 16rem
margin-r-72margin-right: 18rem
margin-r-80margin-right: 20rem
margin-r-88margin-right: 22rem
margin-r-96margin-right: 24rem
margin-r-104margin-right: 26rem
margin-r-112margin-right: 28rem
-margin-r-pxmargin-right: -1px
-margin-r-1margin-right: -0.25rem
-margin-r-2margin-right: -0.5rem
-margin-r-3margin-right: -0.75rem
-margin-r-4margin-right: -1rem
-margin-r-5margin-right: -1.25rem
-margin-r-6margin-right: -1.5rem
-margin-r-8margin-right: -2rem
-margin-r-10margin-right: -2.5rem
-margin-r-12margin-right: -3rem
-margin-r-16margin-right: -4rem
-margin-r-20margin-right: -5rem
-margin-r-24margin-right: -6rem
-margin-r-32margin-right: -8rem
-margin-r-40margin-right: -10rem
-margin-r-48margin-right: -12rem
-margin-r-56margin-right: -14rem
-margin-r-64margin-right: -16rem
-margin-r-72margin-right: -18rem
-margin-r-80margin-right: -20rem
-margin-r-88margin-right: -22rem
-margin-r-96margin-right: -24rem
-margin-r-104margin-right: -26rem
-margin-r-112margin-right: -28rem
classcss
margin-b-automargin-bottom: auto
margin-b-pxmargin-bottom: 1px
margin-b-0margin-bottom: 0
margin-b-1margin-bottom: 0.25rem
margin-b-2margin-bottom: 0.5rem
margin-b-3margin-bottom: 0.75rem
margin-b-4margin-bottom: 1rem
margin-b-5margin-bottom: 1.25rem
margin-b-6margin-bottom: 1.5rem
margin-b-8margin-bottom: 2rem
margin-b-10margin-bottom: 2.5rem
margin-b-12margin-bottom: 3rem
margin-b-16margin-bottom: 4rem
margin-b-20margin-bottom: 5rem
margin-b-24margin-bottom: 6rem
margin-b-32margin-bottom: 8rem
margin-b-40margin-bottom: 10rem
margin-b-48margin-bottom: 12rem
margin-b-56margin-bottom: 14rem
margin-b-64margin-bottom: 16rem
margin-b-72margin-bottom: 18rem
margin-b-80margin-bottom: 20rem
margin-b-88margin-bottom: 22rem
margin-b-96margin-bottom: 24rem
margin-b-104margin-bottom: 26rem
margin-b-112margin-bottom: 28rem
-margin-b-pxmargin-bottom: -1px
-margin-b-1margin-bottom: -0.25rem
-margin-b-2margin-bottom: -0.5rem
-margin-b-3margin-bottom: -0.75rem
-margin-b-4margin-bottom: -1rem
-margin-b-5margin-bottom: -1.25rem
-margin-b-6margin-bottom: -1.5rem
-margin-b-8margin-bottom: -2rem
-margin-b-10margin-bottom: -2.5rem
-margin-b-12margin-bottom: -3rem
-margin-b-16margin-bottom: -4rem
-margin-b-20margin-bottom: -5rem
-margin-b-24margin-bottom: -6rem
-margin-b-32margin-bottom: -8rem
-margin-b-40margin-bottom: -10rem
-margin-b-48margin-bottom: -12rem
-margin-b-56margin-bottom: -14rem
-margin-b-64margin-bottom: -16rem
-margin-b-72margin-bottom: -18rem
-margin-b-80margin-bottom: -20rem
-margin-b-88margin-bottom: -22rem
-margin-b-96margin-bottom: -24rem
-margin-b-104margin-bottom: -26rem
-margin-b-112margin-bottom: -28rem
classcss
margin-l-automargin-left: auto
margin-l-pxmargin-left: 1px
margin-l-0margin-left: 0
margin-l-1margin-left: 0.25rem
margin-l-2margin-left: 0.5rem
margin-l-3margin-left: 0.75rem
margin-l-4margin-left: 1rem
margin-l-5margin-left: 1.25rem
margin-l-6margin-left: 1.5rem
margin-l-8margin-left: 2rem
margin-l-10margin-left: 2.5rem
margin-l-12margin-left: 3rem
margin-l-16margin-left: 4rem
margin-l-20margin-left: 5rem
margin-l-24margin-left: 6rem
margin-l-32margin-left: 8rem
margin-l-40margin-left: 10rem
margin-l-48margin-left: 12rem
margin-l-56margin-left: 14rem
margin-l-64margin-left: 16rem
margin-l-72margin-left: 18rem
margin-l-80margin-left: 20rem
margin-l-88margin-left: 22rem
margin-l-96margin-left: 24rem
margin-l-104margin-left: 26rem
margin-l-112margin-left: 28rem
-margin-l-pxmargin-left: -1px
-margin-l-1margin-left: -0.25rem
-margin-l-2margin-left: -0.5rem
-margin-l-3margin-left: -0.75rem
-margin-l-4margin-left: -1rem
-margin-l-5margin-left: -1.25rem
-margin-l-6margin-left: -1.5rem
-margin-l-8margin-left: -2rem
-margin-l-10margin-left: -2.5rem
-margin-l-12margin-left: -3rem
-margin-l-16margin-left: -4rem
-margin-l-20margin-left: -5rem
-margin-l-24margin-left: -6rem
-margin-l-32margin-left: -8rem
-margin-l-40margin-left: -10rem
-margin-l-48margin-left: -12rem
-margin-l-56margin-left: -14rem
-margin-l-64margin-left: -16rem
-margin-l-72margin-left: -18rem
-margin-l-80margin-left: -20rem
-margin-l-88margin-left: -22rem
-margin-l-96margin-left: -24rem
-margin-l-104margin-left: -26rem
-margin-l-112margin-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