margin

Utilities for controlling an element's margin.

Quick reference

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) { --baro-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--baro-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--baro-space-x-reverse))); }
-space-x-<number>	& > :not(:last-child) { --baro-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -<number>) * var(--baro-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--baro-space-x-reverse))); }
space-x-px	& > :not(:last-child) { --baro-space-x-reverse: 0; margin-inline-start: calc(1px * var(--baro-space-x-reverse)); margin-inline-end: calc(1px * calc(1 - var(--baro-space-x-reverse))); }
-space-x-px	& > :not(:last-child) { --baro-space-x-reverse: 0; margin-inline-start: calc(-1px * var(--baro-space-x-reverse)); margin-inline-end: calc(-1px * calc(1 - var(--baro-space-x-reverse))); }
space-x-(<custom-property>)	& > :not(:last-child) { --baro-space-x-reverse: 0; margin-inline-start: calc(var(<custom-property>) * var(--baro-space-x-reverse)); margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--baro-space-x-reverse))); }
space-x-[<value>]	& > :not(:last-child) { --baro-space-x-reverse: 0; margin-inline-start: calc(<value> * var(--baro-space-x-reverse)); margin-inline-end: calc(<value> * calc(1 - var(--baro-space-x-reverse))); }
space-y-<number>	& > :not(:last-child) { --baro-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * <number>) * var(--baro-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--baro-space-y-reverse))); }
-space-y-<number>	& > :not(:last-child) { --baro-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * -<number>) * var(--baro-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--baro-space-y-reverse))); }
space-y-px	& > :not(:last-child) { --baro-space-y-reverse: 0; margin-block-start: calc(1px * var(--baro-space-y-reverse)); margin-block-end: calc(1px * calc(1 - var(--baro-space-y-reverse))); }
-space-y-px	& > :not(:last-child) { --baro-space-y-reverse: 0; margin-block-start: calc(-1px * var(--baro-space-y-reverse)); margin-block-end: calc(-1px * calc(1 - var(--baro-space-y-reverse))); }
space-y-(<custom-property>)	& > :not(:last-child) { --baro-space-y-reverse: 0; margin-block-start: calc(var(<custom-property>) * var(--baro-space-y-reverse)); margin-block-end: calc(var(<custom-property>) * calc(1 - var(--baro-space-y-reverse))); }
space-y-[<value>]	& > :not(:last-child) { --baro-space-y-reverse: 0; margin-block-start: calc(<value> * var(--baro-space-y-reverse)); margin-block-end: calc(<value> * calc(1 - var(--baro-space-y-reverse))); }
space-x-reverse	& > :not(:last-child) { --baro-space-x-reverse: 1; }
space-y-reverse	& > :not(:last-child) { --baro-space-y-reverse: 1; }

Examples

Basic example

Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element:

<!-- [!code classes:m-8] -->
<div class="m-8 ...">m-8</div>

Adding margin to a single side

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:

<!-- [!code classes: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>

Adding horizontal margin

Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element:

<!-- [!code classes:mx-8] -->
<div class="mx-8 ...">mx-8</div>

Adding vertical margin

Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element:

<!-- [!code classes:my-8] -->
<div class="my-8 ...">my-8</div>

Using negative values

To use a negative margin value, prefix the class name with a dash to convert it to a negative value:

<!-- [!code classes:-mt-8] -->
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>

Using logical properties

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:

<!-- [!code classes:ms-8,me-8] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<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>

Adding space between children

Use space-x-<number> or space-y-<number> utilities like space-x-4 and space-y-8 to control the space between elements:

<!-- [!code classes:space-x-4] -->
<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Reversing children order

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:

<!-- [!code classes:flex-row-reverse,space-x-4,space-x-reverse] -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Limitations

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.

Using a custom value

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.

Responsive design

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>

Customizing your theme

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: