margin

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página

Examples#
Basic example#
Adding margin to a single side#
Adding horizontal margin#
Adding vertical margin#
Using negative values#
Using logical properties#
Adding space between children#
Using a custom value#
Responsive design#
Customizing your theme#

Clase	Propiedades CSS
`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>;`
`mbs-<number>`	`margin-block-start: calc(var(--spacing) * <number>);`
`-mbs-<number>`	`margin-block-start: calc(var(--spacing) * -<number>);`
`mbs-auto`	`margin-block-start: auto;`
`mbs-px`	`margin-block-start: 1px;`
`-mbs-px`	`margin-block-start: -1px;`
`mbs-(<custom-property>)`	`margin-block-start: var(<custom-property>);`
`mbs-[<value>]`	`margin-block-start: <value>;`
`mbe-<number>`	`margin-block-end: calc(var(--spacing) * <number>);`
`-mbe-<number>`	`margin-block-end: calc(var(--spacing) * -<number>);`
`mbe-auto`	`margin-block-end: auto;`
`mbe-px`	`margin-block-end: 1px;`
`-mbe-px`	`margin-block-end: -1px;`
`mbe-(<custom-property>)`	`margin-block-end: var(<custom-property>);`
`mbe-[<value>]`	`margin-block-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-reverse`	`& > :not(:last-child)) { --tw-space-x-reverse: 1; }`
`space-y-reverse`	`& > :not(:last-child)) { --tw-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:

{

    </div>
    <div className="relative m-8 rounded-lg bg-blue-500 p-4">m-8</div>
  </div>
</div>

}

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

{

      <div className="relative rounded-lg bg-purple-500 p-4">mt-6</div>
    </div>
  </div>
  <div className="absolute top-1/2 right-0 -translate-y-1/2">
    <div className="relative pr-4">

      <div className="relative rounded-lg bg-purple-500 p-4">mr-4</div>
    </div>
  </div>
  <div className="absolute bottom-0 left-1/2 -translate-x-1/2 md:ml-24">
    <div className="relative pb-8">

      <div className="relative rounded-lg bg-purple-500 p-4">mb-8</div>
    </div>
  </div>
  <div className="absolute top-1/2 left-0 -translate-y-1/2">
    <div className="relative pl-2">

      <div className="relative rounded-lg bg-purple-500 p-4">ml-2</div>
    </div>
  </div>
</div>

}

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

{

    </div>
    <div className="relative mx-8 rounded-lg bg-indigo-500 p-4">mx-8</div>
  </div>
</div>

}

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

{

    </div>
    <div className="relative my-8 rounded-lg bg-pink-500 p-4">my-8</div>
  </div>
</div>

}

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

{

-mt-8

}

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

{

Left-to-right

      <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div>
    </div>
    <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white">

      <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div>
    </div>
  </div>
  <div className="flex flex-col items-start gap-y-4" dir="rtl">
    <p className="text-sm font-medium">Right-to-left</p>
    <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white">

      <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div>
    </div>
    <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white">

      <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div>
    </div>
  </div>
</div>

}

<!-- [!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>

Use the mbs-<number> and mbe-<number> utilities to set the margin-block-start and margin-block-end logical properties, which map to either the top or bottom side based on the writing mode:

<!-- [!code classes:mbs-8] -->
<div class="mbs-8 ...">mbs-8</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:

{

    </div>
    <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
    <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
    <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
  </div>
</div>

}

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

{

    </div>
    <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">01</div>
    <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">02</div>
    <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">03</div>
  </div>
</div>

}

<!-- [!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.