Espaciado y cajas en Tailwind CSS

Domina el espaciado y el diseño de cajas en Tailwind con una estrategia clara: usa utilidades simples para controlar margin, padding, bordes, esquinas y sombras mientras validas resultados al instante en el Playground. Aquí tienes una guía práctica, directa y lista para aplicar en tus diseños.

¿Cómo controlar el espaciado con Tailwind CSS?

Comprender el espaciado es esencial: con la clase m- controlas el espacio externo (margin) y con p- el espacio interno (padding). Ambos definen cómo "respira" tu contenido dentro y fuera de una caja.

• m-4 agrega margen externo predefinido al elemento.
• p-6 agrega padding interno y separa el texto del borde.
• bg-blue-200 permite ver claramente el background y distinguir margin vs padding.

Ejemplo base de caja con espaciado y color:

<div class="m-4 p-6 bg-blue-200">
  Caja con margin y padding.
</div>

¿Qué significa la escala 4, 6 o 10 en m y p?

La escala de Tailwind está basada por defecto en múltiplos de cuatro. Así, los valores como 4 o 6 son parte de una escala de espaciado predefinida que puedes personalizar si lo necesitas. También hay equivalencias útiles:

• m-0: sin margen.
• m-1: 0.25rem.
• m-2: 0.5rem.
• … hasta m-32: 8rem (128px).

Estos mismos valores se aplican a padding con p-, y a otras utilidades que aceptan la escala.

¿Cómo visualizar la diferencia entre margin y padding?

El margin separa el elemento del resto; el padding separa el contenido del borde. Al combinar m-4 y p-6 con un color de fondo, verás ambas capas con claridad.

• margin: separación externa del contenedor.
• padding: separación interna del texto respecto al borde.
• Usar bg-… resalta la caja y facilita el control visual.

¿Cómo personalizar márgenes por dirección?

Cuando necesitas detalle, aplica márgenes por lado. Usa mt- para arriba, mb- para abajo, ml- para izquierda y mr- para derecha. Si buscas simetría, mx- controla horizontal y my- vertical.

• mt-4: margen superior.
• mb-6: margen inferior mayor.
• ml-2 y mr-10: izquierda corta y derecha amplia.
• mx-4 y my-4: espaciados simétricos horizontal y vertical.

Ejemplos de dirección y ejes:

<!-- Lados específicos -->
<div class="mt-4 mb-6 ml-2 mr-10 p-4 bg-blue-200">
  Márgenes personalizados por lado.
</div>

<!-- Ejes horizontal y vertical -->
<div class="mx-4 my-4 p-4 bg-blue-200">
  Espaciado simétrico en ejes.
</div>

¿Cómo diseñar cajas con borde, esquinas y sombra?

El diseño de cajas combina border, esquinas redondeadas y shadow. Primero define el borde con grosor y color; luego ajusta radios y sombras según la presencia que quieras lograr.

• border-4: grosor de borde con escala predefinida.
• border-red-500: color dentro de una paleta del 50 al 950.
• p-4: añade interior para que el borde tenga sentido visual.
• mt-8: separa la caja del elemento superior.

Ejemplo con borde y espaciado:

<div class="border-4 border-red-500 p-4 mt-8">
  Caja con borde rojo y padding.
</div>

¿Cómo redondear las esquinas con precisión?

Activa esquinas redondeadas con utilidades de rounded en una escala que va de algo sutil a extra large. Úsala junto a background para apreciar mejor el contorno.

<div class="border p-4 rounded-xl bg-gray-200">
  Esquinas redondeadas en escala extra large.
</div>

• rounded: activa redondeo sutil.
• rounded-xl: presencia marcada en las esquinas.
• Combínalo con bg-… para percibir el cambio.

¿Cómo aplicar sombras que aporten presencia?

Las sombras con shadow también siguen una clasificación (por ejemplo, de sutil a 2XL) y ayudan a destacar la caja sobre el fondo.

<div class="p-4 rounded-xl shadow-2xl bg-blue-100">
  Caja con sombra intensa 2XL.
</div>

• shadow-md: sombra media apenas perceptible.
• shadow-2xl: sombra más robusta y visible.
• Ajusta color y borde para un equilibrio visual.

¿Te animas al reto final? Construye una caja combinando espaciado, borde, esquinas y sombra con utilidades de Tailwind. Comparte tu código y un screenshot para ver el resultado.