Spacing
Margin
Utilities for controls margin (and negative margin) in 0.25rem increments.
Class
class | css |
---|---|
m-auto | margin: auto |
m-px | margin: 1px |
m-0 | margin: 0 |
m-1 | margin: 0.25rem |
m-2 | margin: 0.5rem |
m-3 | margin: 0.75rem |
m-4 | margin: 1rem |
m-5 | margin: 1.25rem |
m-6 | margin: 1.5rem |
m-8 | margin: 2rem |
m-10 | margin: 2.5rem |
m-12 | margin: 3rem |
m-16 | margin: 4rem |
m-20 | margin: 5rem |
m-24 | margin: 6rem |
m-32 | margin: 8rem |
m-40 | margin: 10rem |
m-48 | margin: 12rem |
m-56 | margin: 14rem |
m-64 | margin: 16rem |
m-72 v1.1.3 | margin: 18rem |
m-80 v1.1.3 | margin: 20rem |
m-88 v1.1.3 | margin: 22rem |
m-96 v1.1.3 | margin: 24rem |
m-104 v1.1.3 | margin: 26rem |
m-112 v1.1.3 | margin: 28rem |
-m-px | margin: -1px |
-m-1 | margin: -0.25rem |
-m-2 | margin: -0.5rem |
-m-3 | margin: -0.75rem |
-m-4 | margin: -1rem |
-m-5 | margin: -1.25rem |
-m-6 | margin: -1.5rem |
-m-8 | margin: -2rem |
-m-10 | margin: -2.5rem |
-m-12 | margin: -3rem |
-m-16 | margin: -4rem |
-m-20 | margin: -5rem |
-m-24 | margin: -6rem |
-m-32 | margin: -8rem |
-m-40 | margin: -10rem |
-m-48 | margin: -12rem |
-m-56 | margin: -14rem |
-m-64 | margin: -16rem |
-m-72 v1.1.3 | margin: -18rem |
-m-80 v1.1.3 | margin: -20rem |
-m-88 v1.1.3 | margin: -22rem |
-m-96 v1.1.3 | margin: -24rem |
-m-104 v1.1.3 | margin: -26rem |
-m-112 v1.1.3 | margin: -28rem |
mx-auto | margin-right: auto; margin-left: auto |
mx-px | margin-right: 1px; margin-left: 1px |
mx-0 | margin-right: 0; margin-left: 0 |
mx-1 | margin-right: 0.25rem; margin-left: 0.25rem |
mx-2 | margin-right: 0.5rem; margin-left: 0.5rem |
mx-3 | margin-right: 0.75rem; margin-left: 0.75rem |
mx-4 | margin-right: 1rem; margin-left: 1rem |
mx-5 | margin-right: 1.25rem; margin-left: 1.25rem |
mx-6 | margin-right: 1.5rem; margin-left: 1.5rem |
mx-8 | margin-right: 2rem; margin-left: 2rem |
mx-10 | margin-right: 2.5rem; margin-left: 2.5rem |
mx-12 | margin-right: 3rem; margin-left: 3rem |
mx-16 | margin-right: 4rem; margin-left: 4rem |
mx-20 | margin-right: 5rem; margin-left: 5rem |
mx-24 | margin-right: 6rem; margin-left: 6rem |
mx-32 | margin-right: 8rem; margin-left: 8rem |
mx-40 | margin-right: 10rem; margin-left: 10rem |
mx-48 | margin-right: 12rem; margin-left: 12rem |
mx-56 | margin-right: 14rem; margin-left: 14rem |
mx-64 | margin-right: 16rem; margin-left: 16rem |
mx-72 v1.1.3 | margin-right: 18rem; margin-left: 18rem |
mx-80 v1.1.3 | margin-right: 20rem; margin-left: 20rem |
mx-88 v1.1.3 | margin-right: 22rem; margin-left: 22rem |
mx-96 v1.1.3 | margin-right: 24rem; margin-left: 24rem |
mx-104 v1.1.3 | margin-right: 26rem margin-left: 26rem |
mx-112 v1.1.3 | margin-right: 28rem margin-left: 28rem |
-mx-px | margin-right: -1px; margin-left: -1px |
-mx-1 | margin-right: -0.25rem; margin-left: -0.25rem |
-mx-2 | margin-right: -0.5rem; margin-left: -0.5rem |
-mx-3 | margin-right: -0.75rem; margin-left: -0.75rem |
-mx-4 | margin-right: -1rem; margin-left: -1rem |
-mx-5 | margin-right: -1.25rem; margin-left: -1.25rem |
-mx-6 | margin-right: -1.5rem; margin-left: -1.5rem |
-mx-8 | margin-right: -2rem; margin-left: -2rem |
-mx-10 | margin-right: -2.5rem; margin-left: -2.5rem |
-mx-12 | margin-right: -3rem; margin-left: -3rem |
-mx-16 | margin-right: -4rem; margin-left: -4rem |
-mx-20 | margin-right: -5rem; margin-left: -5rem |
-mx-24 | margin-right: -6rem; margin-left: -6rem |
-mx-32 | margin-right: -8rem; margin-left: -8rem |
-mx-40 | margin-right: -10rem; margin-left: -10rem |
-mx-48 | margin-right: -12rem; margin-left: -12rem |
-mx-56 | margin-right: -14rem; margin-left: -14rem |
-mx-64 | margin-right: -16rem; margin-left: -16rem |
-mx-72 v1.1.3 | margin-right: -18rem; margin-left: -18rem |
-mx-80 v1.1.3 | margin-right: -20rem; margin-left: -20rem |
-mx-88 v1.1.3 | margin-right: -22rem; margin-left: -22rem |
-mx-96 v1.1.3 | margin-right: -24rem; margin-left: -24rem |
-mx-104 v1.1.3 | margin-right: -26rem; margin-left: -26rem |
-mx-112 v1.1.3 | margin-right: -28rem; margin-left: -28rem |
my-auto | margin-top: auto; margin-bottom: auto |
my-px | margin-top: 1px; margin-bottom: 1px |
my-0 | margin-top: 0; margin-bottom: 0 |
my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem |
my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem |
my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem |
my-4 | margin-top: 1rem; margin-bottom: 1rem |
my-5 | margin-top: 1.25rem; margin-bottom: 1.25rem |
my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem |
my-8 | margin-top: 2rem; margin-bottom: 2rem |
my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem |
my-12 | margin-top: 3rem; margin-bottom: 3rem |
my-16 | margin-top: 4rem; margin-bottom: 4rem |
my-20 | margin-top: 5rem; margin-bottom: 5rem |
my-24 | margin-top: 6rem; margin-bottom: 6rem |
my-32 | margin-top: 8rem; margin-bottom: 8rem |
my-40 | margin-top: 10rem; margin-bottom: 10rem |
my-48 | margin-top: 12rem; margin-bottom: 12rem |
my-56 | margin-top: 14rem; margin-bottom: 14rem |
my-64 | margin-top: 16rem; margin-bottom: 16rem |
my-72 v1.1.3 | margin-top: 18rem; margin-bottom: 18rem |
my-80 v1.1.3 | margin-top: 20rem; margin-bottom: 20rem |
my-88 v1.1.3 | margin-top: 22rem; margin-bottom: 22rem |
my-96 v1.1.3 | margin-top: 24rem; margin-bottom: 24rem |
my-104 v1.1.3 | margin-top: 26rem; margin-bottom: 26rem |
my-112 v1.1.3 | margin-top: 28rem; margin-bottom: 28rem |
-my-px | margin-top: -1px; margin-bottom: -1px |
-my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem |
-my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem |
-my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem |
-my-4 | margin-top: -1rem; margin-bottom: -1rem |
-my-5 | margin-top: -1.25rem; margin-bottom: -1.25rem |
-my-6 | margin-top: -1.5rem; margin-bottom: -1.5rem |
-my-8 | margin-top: -2rem; margin-bottom: -2rem |
-my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem |
-my-12 | margin-top: -3rem; margin-bottom: -3rem |
-my-16 | margin-top: -4rem; margin-bottom: -4rem |
-my-20 | margin-top: -5rem; margin-bottom: -5rem |
-my-24 | margin-top: -6rem; margin-bottom: -6rem |
-my-32 | margin-top: -8rem; margin-bottom: -8rem |
-my-40 | margin-top: -10rem; margin-bottom: -10rem |
-my-48 | margin-top: -12rem; margin-bottom: -12rem |
-my-56 | margin-top: -14rem; margin-bottom: -14rem |
-my-64 | margin-top: -16rem; margin-bottom: -16rem |
-my-72 v1.1.3 | margin-top: -18rem; margin-bottom: -18rem |
-my-80 v1.1.3 | margin-top: -20rem; margin-bottom: -20rem |
-my-88 v1.1.3 | margin-top: -22rem; margin-bottom: -22rem |
-my-96 v1.1.3 | margin-top: -24rem; margin-bottom: -24rem |
-my-104 v1.1.3 | margin-top: -26rem; margin-bottom: -26rem |
-my-112 v1.1.3 | margin-top: -28rem; margin-bottom: -28rem |
mt-auto | margin-top: auto |
mt-px | margin-top: 1px |
mt-0 | margin-top: 0 |
mt-1 | margin-top: 0.25rem |
mt-2 | margin-top: 0.5rem |
mt-3 | margin-top: 0.75rem |
mt-4 | margin-top: 1rem |
mt-5 | margin-top: 1.25rem |
mt-6 | margin-top: 1.5rem |
mt-8 | margin-top: 2rem |
mt-10 | margin-top: 2.5rem |
mt-12 | margin-top: 3rem |
mt-16 | margin-top: 4rem |
mt-20 | margin-top: 5rem |
mt-24 | margin-top: 6rem |
mt-32 | margin-top: 8rem |
mt-40 | margin-top: 10rem |
mt-48 | margin-top: 12rem |
mt-56 | margin-top: 14rem |
mt-64 | margin-top: 16rem |
mt-72 v1.1.3 | margin-top: 18rem |
mt-80 v1.1.3 | margin-top: 20rem |
mt-88 v1.1.3 | margin-top: 22rem |
mt-96 v1.1.3 | margin-top: 24rem |
mt-104 v1.1.3 | margin-top: 26rem |
mt-112 v1.1.3 | margin-top: 28rem |
-mt-px | margin-top: -1px |
-mt-1 | margin-top: -0.25rem |
-mt-2 | margin-top: -0.5rem |
-mt-3 | margin-top: -0.75rem |
-mt-4 | margin-top: -1rem |
-mt-5 | margin-top: -1.25rem |
-mt-6 | margin-top: -1.5rem |
-mt-8 | margin-top: -2rem |
-mt-10 | margin-top: -2.5rem |
-mt-12 | margin-top: -3rem |
-mt-16 | margin-top: -4rem |
-mt-20 | margin-top: -5rem |
-mt-24 | margin-top: -6rem |
-mt-32 | margin-top: -8rem |
-mt-40 | margin-top: -10rem |
-mt-48 | margin-top: -12rem |
-mt-56 | margin-top: -14rem |
-mt-64 | margin-top: -16rem |
-mt-72 v1.1.3 | margin-top: -18rem |
-mt-80 v1.1.3 | margin-top: -20rem |
-mt-88 v1.1.3 | margin-top: -22rem |
-mt-96 v1.1.3 | margin-top: -24rem |
-mt-104 v1.1.3 | margin-top: -26rem |
-mt-112 v1.1.3 | margin-top: -28rem |
mr-auto | margin-right: auto |
mr-px | margin-right: 1px |
mr-0 | margin-right: 0 |
mr-1 | margin-right: 0.25rem |
mr-2 | margin-right: 0.5rem |
mr-3 | margin-right: 0.75rem |
mr-4 | margin-right: 1rem |
mr-5 | margin-right: 1.25rem |
mr-6 | margin-right: 1.5rem |
mr-8 | margin-right: 2rem |
mr-10 | margin-right: 2.5rem |
mr-12 | margin-right: 3rem |
mr-16 | margin-right: 4rem |
mr-20 | margin-right: 5rem |
mr-24 | margin-right: 6rem |
mr-32 | margin-right: 8rem |
mr-40 | margin-right: 10rem |
mr-48 | margin-right: 12rem |
mr-56 | margin-right: 14rem |
mr-64 | margin-right: 16rem |
mr-72 v1.1.3 | margin-right: 18rem |
mr-80 v1.1.3 | margin-right: 20rem |
mr-88 v1.1.3 | margin-right: 22rem |
mr-96 v1.1.3 | margin-right: 24rem |
mr-104 v1.1.3 | margin-right: 26rem |
mr-112 v1.1.3 | margin-right: 28rem |
-mr-px | margin-right: -1px |
-mr-1 | margin-right: -0.25rem |
-mr-2 | margin-right: -0.5rem |
-mr-3 | margin-right: -0.75rem |
-mr-4 | margin-right: -1rem |
-mr-5 | margin-right: -1.25rem |
-mr-6 | margin-right: -1.5rem |
-mr-8 | margin-right: -2rem |
-mr-10 | margin-right: -2.5rem |
-mr-12 | margin-right: -3rem |
-mr-16 | margin-right: -4rem |
-mr-20 | margin-right: -5rem |
-mr-24 | margin-right: -6rem |
-mr-32 | margin-right: -8rem |
-mr-40 | margin-right: -10rem |
-mr-48 | margin-right: -12rem |
-mr-56 | margin-right: -14rem |
-mr-64 | margin-right: -16rem |
-mr-72 v1.1.3 | margin-right: -18rem |
-mr-80 v1.1.3 | margin-right: -20rem |
-mr-88 v1.1.3 | margin-right: -22rem |
-mr-96 v1.1.3 | margin-right: -24rem |
-mr-104 v1.1.3 | margin-right: -26rem |
-mr-112 v1.1.3 | margin-right: -28rem |
mb-auto | margin-bottom: auto |
mb-px | margin-bottom: 1px |
mb-0 | margin-bottom: 0 |
mb-1 | margin-bottom: 0.25rem |
mb-2 | margin-bottom: 0.5rem |
mb-3 | margin-bottom: 0.75rem |
mb-4 | margin-bottom: 1rem |
mb-5 | margin-bottom: 1.25rem |
mb-6 | margin-bottom: 1.5rem |
mb-8 | margin-bottom: 2rem |
mb-10 | margin-bottom: 2.5rem |
mb-12 | margin-bottom: 3rem |
mb-16 | margin-bottom: 4rem |
mb-20 | margin-bottom: 5rem |
mb-24 | margin-bottom: 6rem |
mb-32 | margin-bottom: 8rem |
mb-40 | margin-bottom: 10rem |
mb-48 | margin-bottom: 12rem |
mb-56 | margin-bottom: 14rem |
mb-64 | margin-bottom: 16rem |
mb-72 v1.1.3 | margin-bottom: 18rem |
mb-80 v1.1.3 | margin-bottom: 20rem |
mb-88 v1.1.3 | margin-bottom: 22rem |
mb-96 v1.1.3 | margin-bottom: 24rem |
mb-104 v1.1.3 | margin-bottom: 26rem |
mb-112 v1.1.3 | margin-bottom: 28rem |
-mb-px | margin-bottom: -1px |
-mb-1 | margin-bottom: -0.25rem |
-mb-2 | margin-bottom: -0.5rem |
-mb-3 | margin-bottom: -0.75rem |
-mb-4 | margin-bottom: -1rem |
-mb-5 | margin-bottom: -1.25rem |
-mb-6 | margin-bottom: -1.5rem |
-mb-8 | margin-bottom: -2rem |
-mb-10 | margin-bottom: -2.5rem |
-mb-12 | margin-bottom: -3rem |
-mb-16 | margin-bottom: -4rem |
-mb-20 | margin-bottom: -5rem |
-mb-24 | margin-bottom: -6rem |
-mb-32 | margin-bottom: -8rem |
-mb-40 | margin-bottom: -10rem |
-mb-48 | margin-bottom: -12rem |
-mb-56 | margin-bottom: -14rem |
-mb-64 | margin-bottom: -16rem |
-mb-72 v1.1.3 | margin-bottom: -18rem |
-mb-80 v1.1.3 | margin-bottom: -20rem |
-mb-88 v1.1.3 | margin-bottom: -22rem |
-mb-96 v1.1.3 | margin-bottom: -24rem |
-mb-104 v1.1.3 | margin-bottom: -26rem |
-mb-112 v1.1.3 | margin-bottom: -28rem |
ml-auto | margin-left: auto |
ml-px | margin-left: 1px |
ml-0 | margin-left: 0 |
ml-1 | margin-left: 0.25rem |
ml-2 | margin-left: 0.5rem |
ml-3 | margin-left: 0.75rem |
ml-4 | margin-left: 1rem |
ml-5 | margin-left: 1.25rem |
ml-6 | margin-left: 1.5rem |
ml-8 | margin-left: 2rem |
ml-10 | margin-left: 2.5rem |
ml-12 | margin-left: 3rem |
ml-16 | margin-left: 4rem |
ml-20 | margin-left: 5rem |
ml-24 | margin-left: 6rem |
ml-32 | margin-left: 8rem |
ml-40 | margin-left: 10rem |
ml-48 | margin-left: 12rem |
ml-56 | margin-left: 14rem |
ml-64 | margin-left: 16rem |
ml-72 v1.1.3 | margin-left: 18rem |
ml-80 v1.1.3 | margin-left: 20rem |
ml-88 v1.1.3 | margin-left: 22rem |
ml-96 v1.1.3 | margin-left: 24rem |
ml-104 v1.1.3 | margin-left: 26rem |
ml-112 v1.1.3 | margin-left: 28rem |
-ml-px | margin-left: -1px |
-ml-1 | margin-left: -0.25rem |
-ml-2 | margin-left: -0.5rem |
-ml-3 | margin-left: -0.75rem |
-ml-4 | margin-left: -1rem |
-ml-5 | margin-left: -1.25rem |
-ml-6 | margin-left: -1.5rem |
-ml-8 | margin-left: -2rem |
-ml-10 | margin-left: -2.5rem |
-ml-12 | margin-left: -3rem |
-ml-16 | margin-left: -4rem |
-ml-20 | margin-left: -5rem |
-ml-24 | margin-left: -6rem |
-ml-32 | margin-left: -8rem |
-ml-40 | margin-left: -10rem |
-ml-48 | margin-left: -12rem |
-ml-56 | margin-left: -14rem |
-ml-64 | margin-left: -16rem |
-ml-72 v1.1.3 | margin-left: -18rem |
-ml-80 v1.1.3 | margin-left: -20rem |
-ml-88 v1.1.3 | margin-left: -22rem |
-ml-96 v1.1.3 | margin-left: -24rem |
-ml-104 v1.1.3 | margin-left: -26rem |
-ml-112 v1.1.3 | margin-left: -28rem |
Usage
Set margin to top
, bottom
, left
and right
.
<!-- Example -->
<y class="m-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Set margin to left
and right
.
<!-- Example -->
<y class="mx-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Set margin to top
and bottom
.
<!-- Example -->
<y class="my-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Set margin to top
.
<!-- Example -->
<y class="mt-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Set margin to bottom
.
<!-- Example -->
<y class="mb-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Set margin to left
.
<!-- Example -->
<y class="ml-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Set margin to right
.
<!-- Example -->
<y class="mr-6 ... bg-gray-400">
<y class="... w-full h-32 bg-gray-500"></y>
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'm',
//variant: 'responsive',
property: 'margin',
modifier: (
'72': '...rem',
'84': '...rem'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |