Press/to search

Spacing

Margin

Utilities for controls margin (and negative margin) in 0.25rem increments.


Class

classcss
m-automargin: auto
m-pxmargin: 1px
m-0margin: 0
m-1margin: 0.25rem
m-2margin: 0.5rem
m-3margin: 0.75rem
m-4margin: 1rem
m-5margin: 1.25rem
m-6margin: 1.5rem
m-8margin: 2rem
m-10margin: 2.5rem
m-12margin: 3rem
m-16margin: 4rem
m-20margin: 5rem
m-24margin: 6rem
m-32margin: 8rem
m-40margin: 10rem
m-48margin: 12rem
m-56margin: 14rem
m-64margin: 16rem
m-72 v1.1.3margin: 18rem
m-80 v1.1.3margin: 20rem
m-88 v1.1.3margin: 22rem
m-96 v1.1.3margin: 24rem
m-104 v1.1.3margin: 26rem
m-112 v1.1.3margin: 28rem
-m-pxmargin: -1px
-m-1margin: -0.25rem
-m-2margin: -0.5rem
-m-3margin: -0.75rem
-m-4margin: -1rem
-m-5margin: -1.25rem
-m-6margin: -1.5rem
-m-8margin: -2rem
-m-10margin: -2.5rem
-m-12margin: -3rem
-m-16margin: -4rem
-m-20margin: -5rem
-m-24margin: -6rem
-m-32margin: -8rem
-m-40margin: -10rem
-m-48margin: -12rem
-m-56margin: -14rem
-m-64margin: -16rem
-m-72 v1.1.3margin: -18rem
-m-80 v1.1.3margin: -20rem
-m-88 v1.1.3margin: -22rem
-m-96 v1.1.3margin: -24rem
-m-104 v1.1.3margin: -26rem
-m-112 v1.1.3margin: -28rem
mx-automargin-right: auto;
margin-left: auto
mx-pxmargin-right: 1px;
margin-left: 1px
mx-0margin-right: 0;
margin-left: 0
mx-1margin-right: 0.25rem;
margin-left: 0.25rem
mx-2margin-right: 0.5rem;
margin-left: 0.5rem
mx-3margin-right: 0.75rem;
margin-left: 0.75rem
mx-4margin-right: 1rem;
margin-left: 1rem
mx-5margin-right: 1.25rem;
margin-left: 1.25rem
mx-6margin-right: 1.5rem;
margin-left: 1.5rem
mx-8margin-right: 2rem;
margin-left: 2rem
mx-10margin-right: 2.5rem;
margin-left: 2.5rem
mx-12margin-right: 3rem;
margin-left: 3rem
mx-16margin-right: 4rem;
margin-left: 4rem
mx-20margin-right: 5rem;
margin-left: 5rem
mx-24margin-right: 6rem;
margin-left: 6rem
mx-32margin-right: 8rem;
margin-left: 8rem
mx-40margin-right: 10rem;
margin-left: 10rem
mx-48margin-right: 12rem;
margin-left: 12rem
mx-56margin-right: 14rem;
margin-left: 14rem
mx-64margin-right: 16rem;
margin-left: 16rem
mx-72 v1.1.3margin-right: 18rem;
margin-left: 18rem
mx-80 v1.1.3margin-right: 20rem;
margin-left: 20rem
mx-88 v1.1.3margin-right: 22rem;
margin-left: 22rem
mx-96 v1.1.3margin-right: 24rem;
margin-left: 24rem
mx-104 v1.1.3margin-right: 26rem
margin-left: 26rem
mx-112 v1.1.3margin-right: 28rem
margin-left: 28rem
-mx-pxmargin-right: -1px;
margin-left: -1px
-mx-1margin-right: -0.25rem;
margin-left: -0.25rem
-mx-2margin-right: -0.5rem;
margin-left: -0.5rem
-mx-3margin-right: -0.75rem;
margin-left: -0.75rem
-mx-4margin-right: -1rem;
margin-left: -1rem
-mx-5margin-right: -1.25rem;
margin-left: -1.25rem
-mx-6margin-right: -1.5rem;
margin-left: -1.5rem
-mx-8margin-right: -2rem;
margin-left: -2rem
-mx-10margin-right: -2.5rem;
margin-left: -2.5rem
-mx-12margin-right: -3rem;
margin-left: -3rem
-mx-16margin-right: -4rem;
margin-left: -4rem
-mx-20margin-right: -5rem;
margin-left: -5rem
-mx-24margin-right: -6rem;
margin-left: -6rem
-mx-32margin-right: -8rem;
margin-left: -8rem
-mx-40margin-right: -10rem;
margin-left: -10rem
-mx-48margin-right: -12rem;
margin-left: -12rem
-mx-56margin-right: -14rem;
margin-left: -14rem
-mx-64margin-right: -16rem;
margin-left: -16rem
-mx-72 v1.1.3margin-right: -18rem;
margin-left: -18rem
-mx-80 v1.1.3margin-right: -20rem;
margin-left: -20rem
-mx-88 v1.1.3margin-right: -22rem;
margin-left: -22rem
-mx-96 v1.1.3margin-right: -24rem;
margin-left: -24rem
-mx-104 v1.1.3margin-right: -26rem;
margin-left: -26rem
-mx-112 v1.1.3margin-right: -28rem;
margin-left: -28rem
my-automargin-top: auto;
margin-bottom: auto
my-pxmargin-top: 1px;
margin-bottom: 1px
my-0margin-top: 0;
margin-bottom: 0
my-1margin-top: 0.25rem;
margin-bottom: 0.25rem
my-2margin-top: 0.5rem;
margin-bottom: 0.5rem
my-3margin-top: 0.75rem;
margin-bottom: 0.75rem
my-4margin-top: 1rem;
margin-bottom: 1rem
my-5margin-top: 1.25rem;
margin-bottom: 1.25rem
my-6margin-top: 1.5rem;
margin-bottom: 1.5rem
my-8margin-top: 2rem;
margin-bottom: 2rem
my-10margin-top: 2.5rem;
margin-bottom: 2.5rem
my-12margin-top: 3rem;
margin-bottom: 3rem
my-16margin-top: 4rem;
margin-bottom: 4rem
my-20margin-top: 5rem;
margin-bottom: 5rem
my-24margin-top: 6rem;
margin-bottom: 6rem
my-32margin-top: 8rem;
margin-bottom: 8rem
my-40margin-top: 10rem;
margin-bottom: 10rem
my-48margin-top: 12rem;
margin-bottom: 12rem
my-56margin-top: 14rem;
margin-bottom: 14rem
my-64margin-top: 16rem;
margin-bottom: 16rem
my-72 v1.1.3margin-top: 18rem;
margin-bottom: 18rem
my-80 v1.1.3margin-top: 20rem;
margin-bottom: 20rem
my-88 v1.1.3margin-top: 22rem;
margin-bottom: 22rem
my-96 v1.1.3margin-top: 24rem;
margin-bottom: 24rem
my-104 v1.1.3margin-top: 26rem;
margin-bottom: 26rem
my-112 v1.1.3margin-top: 28rem;
margin-bottom: 28rem
-my-pxmargin-top: -1px;
margin-bottom: -1px
-my-1margin-top: -0.25rem;
margin-bottom: -0.25rem
-my-2margin-top: -0.5rem;
margin-bottom: -0.5rem
-my-3margin-top: -0.75rem;
margin-bottom: -0.75rem
-my-4margin-top: -1rem;
margin-bottom: -1rem
-my-5margin-top: -1.25rem;
margin-bottom: -1.25rem
-my-6margin-top: -1.5rem;
margin-bottom: -1.5rem
-my-8margin-top: -2rem;
margin-bottom: -2rem
-my-10margin-top: -2.5rem;
margin-bottom: -2.5rem
-my-12margin-top: -3rem;
margin-bottom: -3rem
-my-16margin-top: -4rem;
margin-bottom: -4rem
-my-20margin-top: -5rem;
margin-bottom: -5rem
-my-24margin-top: -6rem;
margin-bottom: -6rem
-my-32margin-top: -8rem;
margin-bottom: -8rem
-my-40margin-top: -10rem;
margin-bottom: -10rem
-my-48margin-top: -12rem;
margin-bottom: -12rem
-my-56margin-top: -14rem;
margin-bottom: -14rem
-my-64margin-top: -16rem;
margin-bottom: -16rem
-my-72 v1.1.3margin-top: -18rem;
margin-bottom: -18rem
-my-80 v1.1.3margin-top: -20rem;
margin-bottom: -20rem
-my-88 v1.1.3margin-top: -22rem;
margin-bottom: -22rem
-my-96 v1.1.3margin-top: -24rem;
margin-bottom: -24rem
-my-104 v1.1.3margin-top: -26rem;
margin-bottom: -26rem
-my-112 v1.1.3margin-top: -28rem;
margin-bottom: -28rem
mt-automargin-top: auto
mt-pxmargin-top: 1px
mt-0margin-top: 0
mt-1margin-top: 0.25rem
mt-2margin-top: 0.5rem
mt-3margin-top: 0.75rem
mt-4margin-top: 1rem
mt-5margin-top: 1.25rem
mt-6margin-top: 1.5rem
mt-8margin-top: 2rem
mt-10margin-top: 2.5rem
mt-12margin-top: 3rem
mt-16margin-top: 4rem
mt-20margin-top: 5rem
mt-24margin-top: 6rem
mt-32margin-top: 8rem
mt-40margin-top: 10rem
mt-48margin-top: 12rem
mt-56margin-top: 14rem
mt-64margin-top: 16rem
mt-72 v1.1.3margin-top: 18rem
mt-80 v1.1.3margin-top: 20rem
mt-88 v1.1.3margin-top: 22rem
mt-96 v1.1.3margin-top: 24rem
mt-104 v1.1.3margin-top: 26rem
mt-112 v1.1.3margin-top: 28rem
-mt-pxmargin-top: -1px
-mt-1margin-top: -0.25rem
-mt-2margin-top: -0.5rem
-mt-3margin-top: -0.75rem
-mt-4margin-top: -1rem
-mt-5margin-top: -1.25rem
-mt-6margin-top: -1.5rem
-mt-8margin-top: -2rem
-mt-10margin-top: -2.5rem
-mt-12margin-top: -3rem
-mt-16margin-top: -4rem
-mt-20margin-top: -5rem
-mt-24margin-top: -6rem
-mt-32margin-top: -8rem
-mt-40margin-top: -10rem
-mt-48margin-top: -12rem
-mt-56margin-top: -14rem
-mt-64margin-top: -16rem
-mt-72 v1.1.3margin-top: -18rem
-mt-80 v1.1.3margin-top: -20rem
-mt-88 v1.1.3margin-top: -22rem
-mt-96 v1.1.3margin-top: -24rem
-mt-104 v1.1.3margin-top: -26rem
-mt-112 v1.1.3margin-top: -28rem
mr-automargin-right: auto
mr-pxmargin-right: 1px
mr-0margin-right: 0
mr-1margin-right: 0.25rem
mr-2margin-right: 0.5rem
mr-3margin-right: 0.75rem
mr-4margin-right: 1rem
mr-5margin-right: 1.25rem
mr-6margin-right: 1.5rem
mr-8margin-right: 2rem
mr-10margin-right: 2.5rem
mr-12margin-right: 3rem
mr-16margin-right: 4rem
mr-20margin-right: 5rem
mr-24margin-right: 6rem
mr-32margin-right: 8rem
mr-40margin-right: 10rem
mr-48margin-right: 12rem
mr-56margin-right: 14rem
mr-64margin-right: 16rem
mr-72 v1.1.3margin-right: 18rem
mr-80 v1.1.3margin-right: 20rem
mr-88 v1.1.3margin-right: 22rem
mr-96 v1.1.3margin-right: 24rem
mr-104 v1.1.3margin-right: 26rem
mr-112 v1.1.3margin-right: 28rem
-mr-pxmargin-right: -1px
-mr-1margin-right: -0.25rem
-mr-2margin-right: -0.5rem
-mr-3margin-right: -0.75rem
-mr-4margin-right: -1rem
-mr-5margin-right: -1.25rem
-mr-6margin-right: -1.5rem
-mr-8margin-right: -2rem
-mr-10margin-right: -2.5rem
-mr-12margin-right: -3rem
-mr-16margin-right: -4rem
-mr-20margin-right: -5rem
-mr-24margin-right: -6rem
-mr-32margin-right: -8rem
-mr-40margin-right: -10rem
-mr-48margin-right: -12rem
-mr-56margin-right: -14rem
-mr-64margin-right: -16rem
-mr-72 v1.1.3margin-right: -18rem
-mr-80 v1.1.3margin-right: -20rem
-mr-88 v1.1.3margin-right: -22rem
-mr-96 v1.1.3margin-right: -24rem
-mr-104 v1.1.3margin-right: -26rem
-mr-112 v1.1.3margin-right: -28rem
mb-automargin-bottom: auto
mb-pxmargin-bottom: 1px
mb-0margin-bottom: 0
mb-1margin-bottom: 0.25rem
mb-2margin-bottom: 0.5rem
mb-3margin-bottom: 0.75rem
mb-4margin-bottom: 1rem
mb-5margin-bottom: 1.25rem
mb-6margin-bottom: 1.5rem
mb-8margin-bottom: 2rem
mb-10margin-bottom: 2.5rem
mb-12margin-bottom: 3rem
mb-16margin-bottom: 4rem
mb-20margin-bottom: 5rem
mb-24margin-bottom: 6rem
mb-32margin-bottom: 8rem
mb-40margin-bottom: 10rem
mb-48margin-bottom: 12rem
mb-56margin-bottom: 14rem
mb-64margin-bottom: 16rem
mb-72 v1.1.3margin-bottom: 18rem
mb-80 v1.1.3margin-bottom: 20rem
mb-88 v1.1.3margin-bottom: 22rem
mb-96 v1.1.3margin-bottom: 24rem
mb-104 v1.1.3margin-bottom: 26rem
mb-112 v1.1.3margin-bottom: 28rem
-mb-pxmargin-bottom: -1px
-mb-1margin-bottom: -0.25rem
-mb-2margin-bottom: -0.5rem
-mb-3margin-bottom: -0.75rem
-mb-4margin-bottom: -1rem
-mb-5margin-bottom: -1.25rem
-mb-6margin-bottom: -1.5rem
-mb-8margin-bottom: -2rem
-mb-10margin-bottom: -2.5rem
-mb-12margin-bottom: -3rem
-mb-16margin-bottom: -4rem
-mb-20margin-bottom: -5rem
-mb-24margin-bottom: -6rem
-mb-32margin-bottom: -8rem
-mb-40margin-bottom: -10rem
-mb-48margin-bottom: -12rem
-mb-56margin-bottom: -14rem
-mb-64margin-bottom: -16rem
-mb-72 v1.1.3margin-bottom: -18rem
-mb-80 v1.1.3margin-bottom: -20rem
-mb-88 v1.1.3margin-bottom: -22rem
-mb-96 v1.1.3margin-bottom: -24rem
-mb-104 v1.1.3margin-bottom: -26rem
-mb-112 v1.1.3margin-bottom: -28rem
ml-automargin-left: auto
ml-pxmargin-left: 1px
ml-0margin-left: 0
ml-1margin-left: 0.25rem
ml-2margin-left: 0.5rem
ml-3margin-left: 0.75rem
ml-4margin-left: 1rem
ml-5margin-left: 1.25rem
ml-6margin-left: 1.5rem
ml-8margin-left: 2rem
ml-10margin-left: 2.5rem
ml-12margin-left: 3rem
ml-16margin-left: 4rem
ml-20margin-left: 5rem
ml-24margin-left: 6rem
ml-32margin-left: 8rem
ml-40margin-left: 10rem
ml-48margin-left: 12rem
ml-56margin-left: 14rem
ml-64margin-left: 16rem
ml-72 v1.1.3margin-left: 18rem
ml-80 v1.1.3margin-left: 20rem
ml-88 v1.1.3margin-left: 22rem
ml-96 v1.1.3margin-left: 24rem
ml-104 v1.1.3margin-left: 26rem
ml-112 v1.1.3margin-left: 28rem
-ml-pxmargin-left: -1px
-ml-1margin-left: -0.25rem
-ml-2margin-left: -0.5rem
-ml-3margin-left: -0.75rem
-ml-4margin-left: -1rem
-ml-5margin-left: -1.25rem
-ml-6margin-left: -1.5rem
-ml-8margin-left: -2rem
-ml-10margin-left: -2.5rem
-ml-12margin-left: -3rem
-ml-16margin-left: -4rem
-ml-20margin-left: -5rem
-ml-24margin-left: -6rem
-ml-32margin-left: -8rem
-ml-40margin-left: -10rem
-ml-48margin-left: -12rem
-ml-56margin-left: -14rem
-ml-64margin-left: -16rem
-ml-72 v1.1.3margin-left: -18rem
-ml-80 v1.1.3margin-left: -20rem
-ml-88 v1.1.3margin-left: -22rem
-ml-96 v1.1.3margin-left: -24rem
-ml-104 v1.1.3margin-left: -26rem
-ml-112 v1.1.3margin-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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'm',
$property: margin,
$modifier: (
1: .25rem,
2: 5rem
//...
)
);

// Add Variants
@include yogurt(
$class: 'm',
$property: margin,
$modifier: (
1: .25rem,
2: 5rem
//...
),
$variant: (
'responsive'
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.