Box model

El box model (modelo de caja) es el sistema con el que CSS calcula el tamaño y la posición de todo elemento en la pantalla. Sin excepción, cada elemento — un párrafo, un botón, una imagen, un div vacío — es tratado por el navegador como una caja rectangular con cuatro capas concéntricas: contenido, padding, border y margin. No existe un elemento HTML que esté “fuera” del box model.

Entender el box model es entender cómo CSS razona sobre el espacio. Cuando algo ocupa más lugar del esperado, cuando dos elementos se superponen, cuando un botón parece demasiado chico o cuando una columna “cae” a la fila siguiente, la causa suele estar en una de estas cuatro capas. El box model es el marco conceptual que permite responder por qué un elemento ocupa el espacio que ocupa.

Cada capa tiene una responsabilidad exclusiva. El contenido es donde vive la información. El padding crea espacio interior entre el contenido y el borde. El border dibuja un límite visual alrededor del elemento. El margin separa el elemento del mundo exterior. Ninguna capa hace el trabajo de otra: no se puede reemplazar padding con margin ni viceversa sin cambiar el comportamiento de layout.

La mayoría de los bugs de maquetación en CSS tienen raíz en tres situaciones comunes: no saber qué mide exactamente width y height según el valor de box-sizing, no entender cuándo y cómo el margin colapsa, o confundir qué capas forman parte del fondo visual del elemento y cuáles no. Todos esos problemas se resuelven con una comprensión sólida del box model.

Cómo funciona

Cuando el navegador renderiza un elemento, construye siempre las mismas cuatro capas, una envolviendo a la otra, de adentro hacia afuera: contenido → padding → border → margin. Esto aplica a absolutamente todos los elementos HTML sin excepción — sean visibles o no, en bloque o en línea, grandes o pequeños.

Cada capa tiene un rol exclusivo: ninguna hace el trabajo de otra. El contenido es donde vive la información; el padding da espacio interior; el border delimita el elemento visualmente; el margin separa el elemento de todo lo que lo rodea. Entender qué controla cada capa y cómo se relacionan entre sí es la base de cualquier trabajo de layout en CSS.

1. Contenido (content)

La capa más interna es la única que contiene directamente el texto, las imágenes o los elementos hijos. Es la razón de existencia del elemento: todo lo demás (padding, border, margin) sirve para posicionarla o decorarla. Sus dimensiones se controlan con width y height. Ver width y height.

Si no se declaran width/height, el comportamiento varía según el tipo de elemento: un elemento en bloque (div, p, h1, section…) toma automáticamente todo el ancho disponible en su contenedor y crece en altura según su contenido. Un elemento en línea (span, a, strong…) solo ocupa el espacio de su contenido y width/height no tienen efecto en él.

2. Padding

El padding es el espacio interior entre el contenido y el borde. El background del elemento se extiende hasta cubrir el padding completo, lo que lo hace parte del área visual del elemento. El padding nunca acepta valores negativos. Ver la entrada de padding.

3. Border

El border es el borde visible que rodea el padding y el contenido. Es la única capa que tiene representación gráfica propia — una línea — en lugar de ser simplemente espacio vacío. Para que aparezca, necesita border-style activo; sin él, es invisible aunque se declaren grosor y color. Ver la entrada de border.

4. Margin

El margin es el espacio exterior que separa el elemento de todo lo que lo rodea — otros elementos, los bordes del contenedor, el borde del viewport. El margin es siempre completamente transparente: el background-color del elemento nunca se extiende hasta el margin. Los margins verticales en flujo normal pueden colapsar (el mayor gana, no se suman). Ver la entrada de margin.

Cómo afecta a width y height

La propiedad box-sizing determina qué incluye el ancho y el alto declarados:

• Con box-sizing: content-box (el default del navegador), width y height miden solo el contenido. El padding y el border se suman por fuera: el elemento ocupa más espacio del declarado.
• Con box-sizing: border-box (el reset moderno usado en todos los proyectos), width y height incluyen contenido + padding + border. El elemento ocupa exactamente lo que declarás.

El reset estándar que aplica border-box a todo:

*, *::before, *::after {
  box-sizing: border-box;
}

Ver la entrada de box-sizing para el detalle de los dos modos y sus implicancias.

Gotchas conceptuales

• El margin no forma parte del elemento: background-color nunca colorea el margin. El fondo llega hasta el límite exterior del border, no más allá.
• El padding sí hereda el fondo: si el elemento tiene color de fondo, ese color se extiende hasta el límite del padding, no solo hasta el contenido.
• Colapso de margins verticales: en flujo normal, los margins verticales entre elementos en bloque se fusionan — el mayor gana. Los margins horizontales nunca colapsan.
• width/height no aplican a inline puro: <span>, <a>, <strong> y otros elementos en línea no reemplazados ignoran width y height; su tamaño lo determina el contenido.
• Cicatriz del sandbox de este sitio: el sandbox inyecta *{box-sizing:border-box} automáticamente en su reset (docs/CICATRICES.md A.1.7). Por eso en los ejercicios width es siempre el ancho total sin necesidad de declararlo explícitamente.

Inspeccionando el box model

Las DevTools de todos los navegadores tienen una vista “Box model” (pestaña “Computed” o “Layout”) que dibuja las cuatro capas con sus valores reales. Es la herramienta para entender por qué algo ocupa más o menos espacio del esperado — muestra en colores distintos el contenido (azul), el padding (verde), el border (amarillo) y el margin (naranja), con los valores numéricos de cada capa.

Vigente / legacy

El box model es la base del CSS moderno desde sus primeras versiones. No tiene alternativa legacy: todos los elementos lo usan siempre. Lo que sí cambió históricamente fue el valor por defecto de box-sizing (content-box era lo único en CSS1/2; border-box se popularizó como reset a partir de 2012).