CSS Box Model

¿Qué es el box model?

El box model de CSS es el concepto fundamental detrás de cada diseño en la web. Describe cómo cada elemento HTML se renderiza como una caja rectangular con cuatro capas distintas: content, padding, border y margin. Ya sea que estés dando estilo a un párrafo simple o construyendo un dashboard complejo, el box model determina cuánto espacio ocupa un elemento y cómo se relaciona con sus vecinos.

Piénsalo como el marco de un cuadro. La imagen en sí es el content. El paspartú que la rodea es el padding. El marco es el border. Y el espacio entre este marco y el siguiente en la pared es el margin. Cada elemento en una página web funciona exactamente así: cajas anidadas dentro de otras cajas anidadas.

Las cuatro capas

El Content (contenido) es la capa más interna: el texto, imagen, video u otros medios que contiene el elemento. Su tamaño se define con width y height (o por el propio contenido si estos no se especifican).

El Padding (relleno) se sitúa entre el contenido y el borde. Añade espacio interno al elemento para que el texto no quede pegado a los bordes. El padding es transparente por defecto, por lo que el color de fondo o la imagen del elemento se ven a través de él.

El Border (borde) envuelve el padding y el contenido. Tiene ancho, estilo y color. Los bordes pueden ser decorativos o estructurales: son el límite visible que separa el elemento del mundo exterior.

El Margin (margen) es la capa más externa. Empuja a los demás elementos para alejarlos. A diferencia del padding, el margen siempre es transparente y se sitúa fuera del borde del elemento. Los márgenes son la herramienta principal para controlar el espaciado entre elementos.

box-sizing: content-box vs border-box

La propiedad box-sizing cambia la forma en que el navegador interpreta el width y el height.

Con el valor predeterminado, content-box, el ancho y el alto que definas se aplican únicamente al área de contenido. El padding y el border se suman encima. Por lo tanto, un div con width: 200px, padding: 20px y un border de 4px se renderiza en realidad con un ancho de 248px. Esto es contra-intuitivo y es la fuente más común de errores de layout para los principiantes.

Con border-box, el ancho y el alto incluyen el padding y el border. El mismo div con width: 200px, padding: 20px y un border de 4px mantiene exactamente un ancho de 200px; el área de contenido se reduce para dejar espacio. Así es como la mayoría de los desarrolladores esperan que funcione el dimensionamiento, y es por eso que un reset global como este es una práctica estándar:

/* reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Border-box hace que los layouts sean predecibles. Defines un ancho y el elemento lo respeta. No hay que hacer aritmética mental para descubrir por qué tus columnas son más anchas de lo esperado. Úsalo en todas partes y olvídate de los dolores de cabeza.

Block vs inline vs inline-block

Cada elemento tiene un comportamiento de visualización predeterminado que controla cómo participa en el diseño.

Los elementos Block comienzan en una nueva línea y se expanden para llenar todo el ancho de su contenedor padre. Se apilan verticalmente. Algunos ejemplos son div, p, h1 hasta h6, section, article, header, footer y ul. Los elementos block aceptan width, height, margin en todos los lados y padding en todos los lados.

Los elementos Inline fluyen dentro del texto sin romper la línea. Solo ocupan el ancho que requiere su contenido. Algunos ejemplos son span, a, strong, em, img y code. Los elementos inline ignoran width y height, y los margin y padding verticales no afectan al diseño circundante; se desplazan visualmente pero no empujan a otros elementos.

Los elementos Inline-block son un híbrido. Fluyen en línea como el texto pero se comportan internamente como bloques: aceptan width, height, margin y padding en todos los lados. Los enlaces de navegación, las insignias (badges) y las etiquetas son casos de uso clásicos. Permanecen en el flujo del texto pero te brindan control total sobre el tamaño y el espaciado.

La propiedad display

La propiedad display es la herramienta de maquetación más potente de CSS. Controla no solo el comportamiento del box model, sino también cómo participa un elemento en los algoritmos de diseño.

Los valores más comunes:

• block — caja de ancho completo, se apila verticalmente.
• inline — fluye con el texto, sin dimensiones de box-model.
• inline-block — flujo inline con dimensiones de box-model.
• none — elimina el elemento del diseño por completo. No ocupa espacio y no se renderiza.
• flex — convierte el elemento en un contenedor flex. Los hijos se convierten en flex items con control de diseño unidimensional.
• grid — convierte el elemento en un contenedor grid. Los hijos se posicionan en una cuadrícula bidimensional.
• inline-flex — contenedor flex que fluye inline.
• inline-grid — contenedor grid que fluye inline.

El CSS moderno ofrece flex y grid para la maquetación, pero entender block e inline sigue siendo esencial porque son la base sobre la que se construyen flex y grid. Cualquier elemento sin un valor de display explícito recurre a block o inline dependiendo del tipo de elemento.

Cálculos de ancho y alto

La forma en que se calculan el ancho y el alto depende enteramente de box-sizing.

Con content-box:

Actual width = width + padding-left + padding-right + border-left + border-right
Actual height = height + padding-top + padding-bottom + border-top + border-bottom

Con border-box:

Actual width = width (padding and border are included)
Actual height = height (padding and border are included)

Una consecuencia práctica: con content-box, establecer width: 100% en un elemento con padding o border provocará un desbordamiento horizontal (overflow). Con border-box, funciona como se espera. Este es uno de los argumentos más fuertes para usar siempre border-box.

Para dimensionar dentro de un contenedor, recuerda que los porcentajes para width se refieren al ancho del contenido del padre (incluso con border-box), mientras que los porcentajes para height requieren que el padre tenga una altura explícita; de lo contrario, el porcentaje se trata como auto.

Desbordamiento y desplazamiento

Cuando el contenido es más grande que su contenedor, la propiedad overflow decide qué sucede.

• overflow: visible (por defecto) — el contenido se desborda fuera de la caja. Es visible, pero puede solaparse con elementos hermanos.
• overflow: hidden — el contenido se recorta en el borde de la caja. No hay barra de desplazamiento ni forma de ver el resto.
• overflow: scroll — aparece una barra de desplazamiento, independientemente de si es necesaria o no.
• overflow: auto — la barra de desplazamiento aparece solo cuando el contenido se desborda. Esta suele ser la mejor opción.
• overflow-x y overflow-y permiten controlar el desbordamiento horizontal y vertical de forma independiente.

El desbordamiento es especialmente importante en contenedores de ancho fijo, modales, bloques de código y cualquier elemento cuyo contenido pueda crecer. Sin esto, es común que aparezcan barras de desplazamiento horizontales inesperadas en la página.

Colapso de márgenes (Margin collapse)

Los márgenes verticales tienen una particularidad que sorprende a casi todos los principiantes: se colapsan. Cuando dos márgenes verticales se tocan, prevalece el más grande en lugar de que ambos se sumen.

/* style.css */
.box-a { margin-bottom: 30px; }
.box-b { margin-top: 20px; }
/* The gap between them is 30px, not 50px */

El colapso de márgenes ocurre en tres situaciones:

1. Hermanos adyacentes — el margen inferior de uno y el margen superior del siguiente se fusionan.
2. Padre y primer hijo — el margen superior del padre se colapsa con el margen superior de su primer hijo (si el padre no tiene borde, padding o contenido que los separe).
3. Padre y último hijo — lo mismo que lo anterior, pero para la parte inferior.

El colapso de márgenes nunca ocurre con:

• Márgenes horizontales.
• Elementos flex y grid (el box model es diferente dentro de estos contenedores).
• Elementos con overflow configurado en cualquier valor distinto de visible.
• Elementos con border o padding que separen los márgenes.

Comprender el colapso de márgenes evita el problema de “¿por qué este espacio tiene el tamaño incorrecto?” que lleva a los desarrolladores a añadir padding arbitrario o márgenes negativos.

Posicionamiento: static, relative, absolute, fixed, sticky

La propiedad position saca a un elemento del flujo normal del documento o modifica su posición en él.

static es el valor por defecto. El elemento se mantiene en el flujo normal, y top, right, bottom, left y z-index no tienen ningún efecto.

relative mantiene el elemento en el flujo, pero permite desplazarlo mediante top, right, bottom y left. El espacio original se preserva; es como mover el elemento visualmente mientras se mantiene su espacio en el layout.

absolute elimina el elemento del flujo por completo. Se posiciona relativo a su ancestro posicionado más cercano —cualquier ancestro que tenga position configurado como relative, absolute, fixed o sticky. Si no existe tal ancestro, utiliza el viewport. Los elementos absolutos no afectan el layout de sus hermanos ni de sus padres.

fixed también elimina el elemento del flujo, pero lo posiciona relativo al viewport. Permanece en el mismo lugar aunque se haga scroll en la página. Úsalo para headers persistentes, botones de acción flotantes y modales que deban permanecer visibles.

sticky es un híbrido. El elemento se desplaza normalmente hasta que alcanza un umbral (top, right, bottom o left), momento en el cual se “queda pegado” en su lugar. Es el reemplazo moderno de los listeners de scroll en JavaScript. Las barras de navegación que se mantienen en la parte superior mientras haces scroll son el caso de uso clásico.

/* style.css */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 10;
}

Z-index y contexto de apilamiento

Cuando los elementos se superponen, z-index determina cuál aparece encima. Solo funciona en elementos posicionados — aquellos que tienen position configurado con cualquier valor distinto de static.

Pero z-index no es un simple número global. Crea o participa en un stacking context (contexto de apilamiento). Un stacking context es una capa autónoma que encapsula a sus hijos. Un hijo con z-index: 9999 dentro de un stacking context con z-index: 1 nunca aparecerá por encima de un elemento con z-index: 2 en el contexto padre.

Los stacking contexts son creados por:

• Elementos con position y z-index distintos de auto.
• Elementos con opacity menor a 1.
• Elementos con transform, filter, backdrop-filter o perspective.
• Elementos con isolation: isolate.
• Elementos dentro de un contenedor flex o grid con un z-index.

Comprender los stacking contexts es la clave para resolver los problemas de “el z-index no funciona”. La solución casi nunca es poner un número más grande, sino entender en qué stacking context vive tu elemento.

Mejores prácticas de Layout

• Usa siempre box-sizing: border-box de forma global. Esto elimina toda una categoría de errores de dimensionamiento.
• Evita width: 100% con padding en elementos con content-box. Usa border-box en su lugar.
• Prefiere max-width sobre width para contenido que no deba expandirse demasiado.
• Usa margin: auto para el centrado horizontal dentro de contenedores de bloque.
• Usa overflow: auto en lugar de overflow: hidden cuando necesites barras de desplazamiento para el contenido que desborde.
• Evita asignar height fijos a contenedores con contenido dinámico; deja que crezcan según el contenido.
• Para el espaciado vertical, ten en cuenta el colapso de márgenes (margin collapse). En su lugar, usa gap en flex/grid o padding en el elemento padre.
• Nunca uses position: absolute para el layout general: rompe el flujo del documento y dificulta el diseño responsive.
• Usa position: sticky en lugar de JavaScript para encabezados y barras laterales que deban reaccionar al scroll.
• Mantén los contextos de apilamiento (stacking contexts) simples. El uso excesivo de valores de z-index en componentes profundamente anidados genera confusión.
• Prueba los layouts en múltiples anchos. El box model se comporta de manera diferente cuando el viewport se reduce.

Errores comunes

• Olvidar configurar box-sizing: border-box y obtener anchos inesperados.
• Usar width en elementos inline y preguntarse por qué no cambia nada.
• Aplicar margin en elementos inline y no obtener el espaciado esperado.
• Usar position: absolute sin un padre posicionado, provocando que los elementos se desplacen a la esquina del viewport.
• Confusión cuando z-index no funciona; generalmente es un problema de contexto de apilamiento (stacking context).
• Sorpresa por el colapso de márgenes (margin collapse) entre elementos padres e hijos.
• Establecer una altura fija en un contenedor y notar que el contenido se desborda de forma invisible.
• Usar overflow: hidden para “arreglar” el diseño cuando el problema real es un dimensionamiento incorrecto.

Cuándo usar el box model frente a Flexbox o Grid

El box model no es un sistema de diseño por sí mismo; es la base sobre la cual se construyen todos los diseños de CSS. Flexbox y Grid no reemplazan al box model, sino que lo utilizan. Cada flex item y cada celda de grid siguen teniendo content, padding, border y margin.

Usa el box model directamente para:

• Controlar el espaciado dentro y alrededor de elementos individuales.
• Establecer tamaños explícitos para cards, botones, inputs y contenedores.
• Entender por qué los elementos presentan overflow o no encajan en sus padres.

Usa Flexbox cuando necesites alinear y distribuir elementos a lo largo de un solo eje: barras de navegación, filas de cards o centrado de contenido.

Usa Grid cuando necesites un diseño bidimensional con filas y columnas: estructuras de página, dashboards o galerías de imágenes.

Los mejores desarrolladores de CSS recurren primero al box model para entender qué está sucediendo y luego aplican flex o grid para el diseño de nivel superior. Aprender el box model no es algo independiente de aprender el diseño moderno: es el requisito previo que hace que todo lo demás tenga sentido.