Modelo de caja CSS: margin, padding, border y display
Visualizador del modelo de caja CSS
Modelo de caja CSS: margin vs padding, border, display | We.Inc
Mueve los controles de contenido, padding, border y margin y mira cómo se redibuja el modelo de caja, con box-sizing, colapso de márgenes, estilos de borde y todos los valores de display comparados en vivo.
Cada elemento se dibuja como rectángulos anidados: el contenido, luego el padding (espacio dentro del borde, pintado con el fondo), luego el borde y luego el margin (espacio transparente exterior que aparta a los vecinos). Con box-sizing: border-box, el ancho que defines incluye el padding y el borde, lo que hace los layouts mucho más predecibles. La propiedad display decide cómo fluyen las cajas.
Las cuatro capas, de dentro hacia fuera
Capa
Qué hace
¿Recibe el fondo?
Contenido
Contiene texto, imágenes y elementos hijos
Sí
Padding
Espacio de respiro entre el contenido y el borde
Sí
Border
Una línea visible (o nada) alrededor del padding
Su propio color de borde
Margin
Separación entre esta caja y sus vecinas
No, siempre es transparente
Mueve los cuatro controles y el diagrama, el tamaño total medido y el CSS cambian a la vez. Debajo del visualizador puedes cambiar box-sizing, ver cómo dos márgenes colapsan en uno y comparar block, inline, inline-block, flex, grid y none lado a lado con los mismos tres elementos.
Define un ancho y un alto para el área de contenido y luego añade padding, borde y margin con los controles.
Cambia box-sizing entre content-box y border-box y observa cómo cambia el ancho renderizado.
Lee el ancho y el alto totales que ocupa de verdad el elemento, márgenes incluidos.
Copia el CSS generado y desplázate hacia abajo para ver las demos de colapso de márgenes y de display.
Añade *, *::before, *::after { box-sizing: border-box; } al principio de cada hoja de estilos. La mayoría de resets y frameworks ya lo hacen.
Usa padding cuando quieras que crezca el fondo o la zona clicable, y margin cuando solo quieras distancia entre elementos separados.
En un contenedor flex o grid, mejor gap que márgenes en los hijos. Nunca se duplica en los bordes.
El outline se dibuja fuera del borde y no ocupa espacio; por eso los anillos de foco lo usan en lugar de border.
Preguntas frecuentes
¿Qué diferencia hay entre margin y padding?
El padding está dentro del borde, así que lo rellena el fondo del elemento y forma parte de su zona clicable. El margin está fuera del borde, siempre es transparente y solo separa el elemento de los demás. Además, los márgenes verticales entre bloques pueden colapsar entre sí, mientras que el padding nunca colapsa.
¿Por qué mi elemento es más ancho que el ancho que definí?
Con el box-sizing: content-box por defecto, width se aplica solo al contenido, y el padding y el borde se suman encima. Una caja de 300px con 20px de padding y un borde de 2px se renderiza con 344px de ancho. Cambia a box-sizing: border-box y se queda en 300px, con el contenido encogiéndose para caber.
¿Cuándo colapsan los márgenes?
Los márgenes superior e inferior de las cajas block en flujo normal se fusionan cuando se tocan: entre hermanos, y entre un padre y su primer o último hijo cuando no los separa ningún borde, padding ni contenido inline. Gana el margen mayor. Los márgenes nunca colapsan dentro de contenedores flex o grid, ni en horizontal.
¿Qué diferencia hay entre display: none y visibility: hidden?
display: none elimina por completo el elemento del layout, así que el espacio se cierra y los lectores de pantalla lo omiten. visibility: hidden mantiene el espacio reservado pero no pinta nada, y el contenido también queda oculto para las tecnologías de asistencia. opacity: 0 conserva tanto el espacio como la posibilidad de recibir clics o foco.
¿Puedo definir width en un elemento inline?
No. El ancho, el alto y los márgenes verticales se ignoran en una caja inline normal como un span. El padding vertical se pinta pero no separa las líneas. Cámbialo a inline-block, o convierte el padre en un contenedor flex, y esos tamaños empiezan a aplicarse.
content-box frente a border-box en números
Con content-box, el ancho total es igual a width más el padding izquierdo y derecho más el borde izquierdo y derecho. Después el margin se suma por fuera. Era el comportamiento original de CSS y sigue siendo el predeterminado del navegador para la mayoría de elementos.
Con border-box, el ancho que escribes se mide hasta el borde exterior del border. El padding y el borde se comen el área de contenido en lugar de agrandar la caja, así que un layout de dos columnas de 50% más 50% se mantiene en una línea por mucho padding que añadas.
Bordes más allá de una línea simple
La abreviatura border acepta un ancho, un estilo y un color en cualquier orden. Los estilos son solid, dashed, dotted, double, groove, ridge, inset, outset, none y hidden. Un borde con estilo none tiene ancho cero sea cual sea el ancho que escribiste, lo que sorprende a quien solo define border-width.
border-radius redondea las esquinas del borde, del fondo y del outline en los navegadores actuales. Un valor redondea las cuatro esquinas; una barra define radios horizontal y vertical distintos para esquinas elípticas, y 50% en un cuadrado lo convierte en un círculo.
Cómo cambia display la caja
Las cajas block empiezan en una línea nueva y se estiran para llenar su contenedor. Las cajas inline fluyen dentro de una línea de texto e ignoran el ancho y el alto. inline-block fluye como texto pero acepta tamaños y márgenes verticales, lo que lo hace práctico para badges y botones.
flex y grid convierten el elemento en un bloque por fuera y en un contenedor de layout por dentro. Sus hijos dejan de comportarse como block o inline y siguen las reglas de flex o grid, con gap disponible para el espaciado. contents elimina la propia caja pero conserva sus hijos; sin embargo, tiene un historial de fallos de accesibilidad, así que pruébalo con un lector de pantalla antes de depender de él.
¿Margin o padding? Elige según la tarea
Cuál usar
Quieres
Usa
Que el color de fondo cubra el espacio
Una zona táctil más grande en un botón
Espacio entre dos tarjetas separadas
margin, o gap en el padre
Un elemento empujado al extremo de una fila flex
margin-left: auto
Un bloque de ancho fijo centrado
margin-inline: auto
Espacio que nunca colapse con un vecino
padding, o gap
Colapso de márgenes, en vivo
El primer par muestra dos hermanos cuyos márgenes de 24px y 40px se encuentran: la separación es de 40px, no de 64px. El segundo par está en un contenedor flow-root, que impide que se fusionen los márgenes del padre y del hijo, y el tercero usa flex, donde nada colapsa.
Colapso entre hermanos y entre padre e hijo
Edita los márgenes y observa las separaciones. Añadir padding-top: 1px a la caja exterior también impide que el padre y el hijo se fusionen.
Estilos de borde y radio
Los ocho estilos de borde visibles
groove, ridge, inset y outset sombrean el borde para simular profundidad. Se ven mejor a partir de 4px.
Formas con radio: redondeada, píldora, círculo, elipse
Un radio enorme como 999px crea una píldora de cualquier longitud. 50% en un cuadrado da un círculo.
Todos los valores de display con los mismos tres elementos
Valores de display comparados
Valor
¿Línea nueva?
¿Funcionan ancho y alto?
Uso típico
Tailwind
Sí
Sí
Secciones, párrafos, tarjetas
No
No
Palabras dentro de una frase
No
Sí
Badges, botones en una línea de texto
Sí
Sí
Filas o columnas de elementos
No
Sí
Un icono y una etiqueta dentro del texto
Sí
Sí
Layouts bidimensionales
No
Sí
Un grid pequeño que se coloca en línea
Sí
Sí
Contiene floats y márgenes de los hijos
Caja eliminada
No hay caja que dimensionar
Que los hijos se unan al layout del padre
Fuera del layout
No se renderiza
Ocultar por completo
block, inline, inline-block, flex y grid lado a lado
Cada fila contiene los mismos tres span con width: 80px y padding. Solo inline ignora el ancho.
display: none vs visibility: hidden vs opacity: 0
Tres formas de ocultar, comparadas
Propiedad
¿Conserva su espacio?
¿Clicable o enfocable?
¿Lo leen los lectores de pantalla?
¿Admite transición?
display: none
No
No
No
Solo con allow-discrete en navegadores recientes
visibility: hidden
Sí
No
No
Sí, cambia al final o al principio
opacity: 0
Sí
Sí
Sí
Sí, de forma suave
El elemento central oculto de tres formas
Fíjate en el hueco que dejan visibility y opacity, y en cómo se cierra con display: none.
El reset de border-box
Aplica border-box en todas partes
Se incluyen los pseudoelementos porque también son cajas. El Preflight de Tailwind ya incluye esta regla.
Equivalentes en Tailwind
Utilidades del modelo de caja en Tailwind (escala de espaciado por defecto, 1 unidad = 0.25rem)
CSS
Tailwind
padding: 1rem
padding-inline: 1.5rem
margin-top: 2rem
margin-inline: auto
border-width: 1px / 2px
border / border-2
border-style: dashed
border-radius: 0.5rem
border-radius: 9999px
box-sizing: border-box / content-box
box-border / box-content
visibility: hidden
opacity: 0
Visualizador del modelo de caja
Capa de margin
Caja renderizada (borde exterior)
Espacio ocupado, márgenes incluidos
El amarillo es el margin, la línea azul es el borde, el verde es el padding y el azul claro es el contenido.