File: margin.md | Updated: 11/15/2025
⌘KCtrl KDocs Blog Showcase Sponsor Plus
Spacing
Utilities for controlling an element's margin.
| Class | Styles |
| --- | --- |
| m-<number> | margin: calc(var(--spacing) * <number>); |
| -m-<number> | margin: calc(var(--spacing) * -<number>); |
| m-auto | margin: auto; |
| m-px | margin: 1px; |
| -m-px | margin: -1px; |
| m-(<custom-property>) | margin: var(<custom-property>); |
| m-[<value>] | margin: <value>; |
| mx-<number> | margin-inline: calc(var(--spacing) * <number>); |
| -mx-<number> | margin-inline: calc(var(--spacing) * -<number>); |
| mx-auto | margin-inline: auto; |
| mx-px | margin-inline: 1px; |
| -mx-px | margin-inline: -1px; |
| mx-(<custom-property>) | margin-inline: var(<custom-property>); |
| mx-[<value>] | margin-inline: <value>; |
| my-<number> | margin-block: calc(var(--spacing) * <number>); |
| -my-<number> | margin-block: calc(var(--spacing) * -<number>); |
| my-auto | margin-block: auto; |
| my-px | margin-block: 1px; |
| -my-px | margin-block: -1px; |
| my-(<custom-property>) | margin-block: var(<custom-property>); |
| my-[<value>] | margin-block: <value>; |
| ms-<number> | margin-inline-start: calc(var(--spacing) * <number>); |
| -ms-<number> | margin-inline-start: calc(var(--spacing) * -<number>); |
| ms-auto | margin-inline-start: auto; |
| ms-px | margin-inline-start: 1px; |
| -ms-px | margin-inline-start: -1px; |
| ms-(<custom-property>) | margin-inline-start: var(<custom-property>); |
| ms-[<value>] | margin-inline-start: <value>; |
| me-<number> | margin-inline-end: calc(var(--spacing) * <number>); |
| -me-<number> | margin-inline-end: calc(var(--spacing) * -<number>); |
| me-auto | margin-inline-end: auto; |
| me-px | margin-inline-end: 1px; |
| -me-px | margin-inline-end: -1px; |
| me-(<custom-property>) | margin-inline-end: var(<custom-property>); |
| me-[<value>] | margin-inline-end: <value>; |
| mt-<number> | margin-top: calc(var(--spacing) * <number>); |
| -mt-<number> | margin-top: calc(var(--spacing) * -<number>); |
| mt-auto | margin-top: auto; |
| mt-px | margin-top: 1px; |
| -mt-px | margin-top: -1px; |
| mt-(<custom-property>) | margin-top: var(<custom-property>); |
| mt-[<value>] | margin-top: <value>; |
| mr-<number> | margin-right: calc(var(--spacing) * <number>); |
| -mr-<number> | margin-right: calc(var(--spacing) * -<number>); |
| mr-auto | margin-right: auto; |
| mr-px | margin-right: 1px; |
| -mr-px | margin-right: -1px; |
| mr-(<custom-property>) | margin-right: var(<custom-property>); |
| mr-[<value>] | margin-right: <value>; |
| mb-<number> | margin-bottom: calc(var(--spacing) * <number>); |
| -mb-<number> | margin-bottom: calc(var(--spacing) * -<number>); |
| mb-auto | margin-bottom: auto; |
| mb-px | margin-bottom: 1px; |
| -mb-px | margin-bottom: -1px; |
| mb-(<custom-property>) | margin-bottom: var(<custom-property>); |
| mb-[<value>] | margin-bottom: <value>; |
| ml-<number> | margin-left: calc(var(--spacing) * <number>); |
| -ml-<number> | margin-left: calc(var(--spacing) * -<number>); |
| ml-auto | margin-left: auto; |
| ml-px | margin-left: 1px; |
| -ml-px | margin-left: -1px; |
| ml-(<custom-property>) | margin-left: var(<custom-property>); |
| ml-[<value>] | margin-left: <value>; |
| space-x-<number> | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-x-reverse))); }; |
| -space-x-<number> | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-x-reverse))); }; |
| space-x-px | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(1px * var(--tw-space-x-reverse)); margin-inline-end: calc(1px * calc(1 - var(--tw-space-x-reverse))); }; |
| -space-x-px | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(-1px * var(--tw-space-x-reverse)); margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse))); }; |
| space-x-(<custom-property>) | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(var(<custom-property>) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-x-reverse))); }; |
| space-x-[<value>] | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(<value> * var(--tw-space-x-reverse)); margin-inline-end: calc(<value> * calc(1 - var(--tw-space-x-reverse))); }; |
| space-y-<number> | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-y-reverse))); }; |
| -space-y-<number> | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-y-reverse))); }; |
| space-y-px | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(1px * var(--tw-space-y-reverse)); margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse))); }; |
| -space-y-px | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(-1px * var(--tw-space-y-reverse)); margin-block-end: calc(-1px * calc(1 - var(--tw-space-y-reverse))); }; |
| space-y-(<custom-property>) | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(var(<custom-property>) * var(--tw-space-y-reverse)); margin-block-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-y-reverse))); }; |
| space-y-[<value>] | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(<value> * var(--tw-space-y-reverse)); margin-block-end: calc(<value> * calc(1 - var(--tw-space-y-reverse))); }; |
| space-x-reverse | & > :not(:last-child)) { --tw-space-x-reverse: 1; } |
| space-y-reverse | & > :not(:last-child)) { --tw-space-y-reverse: 1; } |
Show more
Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element:
m-8
<div class="m-8 ...">m-8</div>
Use mt-<number>, mr-<number>, mb-<number>, and ml-<number> utilities like ml-2 and mt-6 to control the margin on one side of an element:
mt-6
mr-4
mb-8
ml-2
<div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>
Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element:
mx-8
<div class="mx-8 ...">mx-8</div>
Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element:
my-8
<div class="my-8 ...">my-8</div>
To use a negative margin value, prefix the class name with a dash to convert it to a negative value:
-mt-8
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>
Use ms-<number> or me-<number> utilities like ms-4 and me-8 to set the margin-inline-start and margin-inline-end logical properties:
Left-to-right
ms-8
me-8
Right-to-left
ms-8
me-8
<div> <div dir="ltr"> <div class="ms-8 ...">ms-8</div> <div class="me-8 ...">me-8</div> </div> <div dir="rtl"> <div class="ms-8 ...">ms-8</div> <div class="me-8 ...">me-8</div> </div></div>
Use space-x-<number> or space-y-<number> utilities like space-x-4 and space-y-8 to control the space between elements:
01
02
03
<div class="flex space-x-4 ..."> <div>01</div> <div>02</div> <div>03</div></div>
If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element:
01
02
03
<div class="flex flex-row-reverse space-x-4 space-x-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>
The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.
For those situations, it's better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.
Additionally, the space utilities are not designed to work together with the divide utilities . For those situations, consider adding margin/padding utilities to the children instead.
Use utilities like m-[<value>],mx-[<value>], and mb-[<value>] to set the margin based on a completely custom value:
<div class="m-[5px] ..."> <!-- ... --></div>
For CSS variables, you can also use the m-(<custom-property>) syntax:
<div class="m-(--my-margin) ..."> <!-- ... --></div>
This is just a shorthand for m-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a margin utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="mt-4 md:mt-8 ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation .
The m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, and ml-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:
@theme { --spacing: 1px; }
Learn more about customizing the spacing scale in the theme variable documentation .
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy