margin

Ejemplos

Ejemplo básico

Utiliza 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

Utiliza utilidades mt-<number>, mr-<number>, mb-<number> y ml-<number> como ml-2 y mt-6 para controlar el margen en un solo 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

Utiliza 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

Utiliza 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, añade un guion como prefijo 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

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

Utiliza las utilidades mbs-<number> y mbe-<number> para establecer las propiedades lógicas margin-block-start y margin-block-end, que se asignan al lado superior o inferior según el modo de escritura:

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

Añadir espacio entre elementos hijos

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

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

Invertir el orden de los elementos hijos

Si tus elementos están en orden inverso (por ejemplo, usando flex-row-reverse o flex-col-reverse), utiliza 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 excepto al último en un grupo, y no están diseñadas para manejar casos complejos como cuadrículas, diseños que se envuelven o situaciones donde los elementos hijos se renderizan en un orden personalizado complejo en lugar de su orden natural en el DOM.

Para esas situaciones, es mejor utilizar las utilidades de gap cuando sea posible, o añadir margen a cada elemento con un margen negativo coincidente en el contenedor 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/relleno (padding) a los elementos hijos en su lugar.

Usar un valor personalizado

Usa utilidades como m-[<value>],mx-[<value>], y mb-[<value>] para establecer el/la margin basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad margin el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información 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>,mbs-<number>,mbe-<number>,mt-<number>,mr-<number>,mb-<number>, y ml-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:

@theme {  --spacing: 1px; }

Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.