05 · Box model
Todo elemento HTML es una caja. Esa caja tiene, de afuera hacia adentro: margin (espacio fuera del borde, empuja a otros elementos), border (el borde en sí) y padding (espacio dentro del borde, entre el borde y el contenido).
m-{n} aplica margen en las 4 direcciones. La escala de Tailwind (1, 2, 4, 8...) corresponde a múltiplos de 0.25rem, así que m-4 = 1rem = 16px.
<div class="m-8 bg-teal-100">
Tengo m-8 (32px) de margen
</div>m-1 = 4px, m-2 = 8px, m-4 = 16px, m-8 = 32px.m-[10px].mx / my controlan un eje completo (horizontal o vertical). mt, mr, mb, ml controlan un solo lado.
<div class="mt-2 mr-8 mb-2 ml-2">...</div>
<div class="mx-8 my-2">...</div>mx-auto junto con un ancho definido (w-64, por ejemplo) es la forma clásica de centrar un bloque horizontalmente.Anteponiendo un guion se obtiene margen negativo, útil para superponer elementos o compensar el espaciado de un padre.
<div class="-mt-6 bg-rose-100">
Se superpone al elemento de arriba
</div>Misma lógica que margin, pero el espacio queda dentro del borde. p-{n}, px-{n}/py-{n}, pt/pr/pb/pl-{n}.
<div class="px-6 py-3 bg-teal-100">
Padding horizontal y vertical distinto
</div>box-sizing: border-box, que es el default de Tailwind vía Preflight).Cuando dos elementos hermanos en flujo normal (no flex/grid) tienen margin vertical, no se suman: se colapsan y prevalece el mayor.
Párrafo A (mb-8)
Párrafo B (mt-4)
<p class="mb-8">Párrafo A</p>
<p class="mt-4">Párrafo B</p>
<!-- El espacio real entre A y B es 32px (mb-8),
no 32px + 16px = 48px -->display: flex o grid, el colapso no aplica — por eso a veces conviene envolver secciones en un flex column con space-y-* en vez de márgenes sueltos.En vez de poner margin a cada hijo, space-y-{n} agrega separación vertical automática entre hermanos directos, sin depender de márgenes que colapsan.
<div class="flex flex-col space-y-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>