margin

Ejemplos

Ejemplo básico

Usa utilidades m-<number> como m-4 y m-8 para controlar el margen en todos los lados de un elemento:

<div class="m-8 ...">m-8</div>

Añadir margen a un solo lado

Usa utilidades mt-<number>, mr-<number>, mb-<number> y ml-<number> como ml-2 y mt-6 para controlar el margen en un lado de un elemento:

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

Añadir margen horizontal

Usa utilidades mx-<number> como mx-4 y mx-8 para controlar el margen horizontal de un elemento:

<div class="mx-8 ...">mx-8</div>

Añadir margen vertical

Usa utilidades my-<number> como my-4 y my-8 para controlar el margen vertical de un elemento:

<div class="my-8 ...">my-8</div>

Usar valores negativos

Para usar un valor de margen negativo, antepone un guion al nombre de la clase para convertirlo en un valor negativo:

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>

Usar propiedades lógicas

Usa utilidades ms-<number> o me-<number> como ms-4 y me-8 para establecer las propiedades lógicas margin-inline-start y margin-inline-end:

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

Añadir espacio entre hijos

Usa utilidades space-x-<number> o space-y-<number> como space-x-4 y space-y-8 para controlar el espacio entre elementos:

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Invertir el orden de los hijos

Si tus elementos están en orden inverso (usando, por ejemplo, flex-row-reverse o flex-col-reverse), usa las utilidades space-x-reverse o space-y-reverse para asegurarte de que el espacio se añada al lado correcto de cada elemento:

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Limitaciones

Las utilidades de espacio son en realidad solo un atajo para añadir margen a todos los elementos de un grupo excepto al último, y no están diseñadas para manejar casos complejos como grids, layouts que se envuelven, o situaciones donde los hijos se renderizan en un orden personalizado complejo en lugar de su orden natural del DOM.

Para esas situaciones, es mejor usar las utilidades gap cuando sea posible, o añadir margen a cada elemento con un margen negativo correspondiente en el padre.

Además, las utilidades de espacio no están diseñadas para funcionar junto con las utilidades divide. Para esas situaciones, considera añadir utilidades de margen/padding a los hijos en su lugar.

Usar un valor personalizado

Usa utilidades como m-[<value>],mx-[<value>], y mb-[<value>] para establecer el margin basado en un valor completamente personalizado:

<div class="m-[5px] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis m-(<custom-property>) :

<div class="m-(--my-margin) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para m-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad margin con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="mt-4 md:mt-8 ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizar tu tema

Las utilidades m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, y ml-<number> son impulsadas por la variable de tema --spacing, la cual puede ser personalizada en tu propio tema:

@theme {
  --spacing: 1px; 
}

Aprende más sobre la personalización de la escala de espaciado en la documentación de variables de tema.