Las cuatro cajas y box-sizing

Todo elemento genera cuatro cajas concéntricas, y casi todas las propiedades que escribes se refieren a una de ellas sin decirlo. box-sizing no cambia el modelo: cambia a cuál de las cuatro se aplica width. Entender esa distinción explica de golpe por qué el margen nunca se incluye, por qué el fondo se pinta por debajo del borde y por qué overflow recorta donde recorta.

Las cuatro cajas

flowchart TB
subgraph M[Caja de margen]
  subgraph B[Caja de borde]
    subgraph P[Caja de relleno]
      C[Caja de contenido]
    end
  end
end
style M fill:#f9e2af,color:#11111b
style B fill:#f38ba8,color:#11111b
style P fill:#94e2d5,color:#11111b
style C fill:#a6e3a1,color:#11111b

De dentro hacia fuera: la caja de contenido encierra el texto y los hijos; la caja de relleno la amplía con padding; la caja de borde añade el grosor de border; y la caja de margen añade margin, que es espacio vacío por fuera de todo.

Las tres primeras son partes del elemento. La cuarta no lo es: el margen no pertenece al elemento, describe su relación con lo que tiene alrededor. De esa diferencia salen casi todas las rarezas del resto del nivel, empezando por que los márgenes colapsan y los rellenos no.

box-sizing y por qué ganó border-box

Por defecto, width y height dimensionan la caja de contenido. Eso significa que el tamaño ocupado es la suma de lo que pediste más el relleno más el borde.

.a {
  box-sizing: content-box;   /* valor inicial */
  inline-size: 200px;
  padding: 20px;
  border: 2px solid;
}
/* Ancho ocupado: 200 + 20 + 20 + 2 + 2 = 244px */

Con border-box, width dimensiona la caja de borde, y el relleno y el borde se comen espacio por dentro:

.b {
  box-sizing: border-box;
  inline-size: 200px;
  padding: 20px;
  border: 2px solid;
}
/* Ancho ocupado: 200px. Contenido: 200 - 40 - 4 = 156px */

La historia merece contarse porque es la única vez que un navegador acertó contra la especificación. Internet Explorer 5 implementaba el modelo de caja de borde; el resto del mundo y el W3C se decantaron por el de contenido, y durante años se citó aquello como el ejemplo canónico de navegador que hacía las cosas mal. Cuando llegó el diseño responsive quedó claro que el modelo cómodo era el otro: si mezclas anchos en porcentaje con rellenos en píxeles, content-box obliga a hacer aritmética que no se puede hacer, porque no conoces el porcentaje. box-sizing se añadió para poder elegir, y la práctica se decantó unánimemente por el modelo que se había ridiculizado.

Lo que box-sizing no hace: el margen nunca entra. No existe ningún valor que incluya el margen en width, y no lo hay porque el margen no forma parte del elemento.

Y un caso límite que conviene conocer: con border-box, si el relleno más el borde superan el width pedido, la caja de contenido se queda en cero y el ancho usado pasa a ser el de relleno más borde. La caja no se hace más pequeña que sus propios adornos.

Qué caja mira cada propiedad

Dos de estas filas explican bugs frecuentes.

El fondo se pinta por debajo del borde. Por eso un borde punteado o semitransparente deja ver el color de fondo entre los puntos. Se corrige con background-clip: padding-box.

.pastilla {
  background: canvas;
  border: 4px dashed rgb(0 0 0 / 0.3);
  background-clip: padding-box;   /* el fondo no asoma por el borde */
}

overflow recorta en la caja de relleno, no en la de contenido. Por eso el padding-bottom de un contenedor con desplazamiento parece desaparecer al llegar al final: no desaparece, es que el contenido puede desplazarse por encima de él. Y por eso outline nunca queda recortado por el overflow de su propio elemento: está fuera de la caja de borde.

El reinicio que conviene escribir

El reinicio universal es una de las tres o cuatro líneas que todo proyecto tiene, y hay dos versiones que no son equivalentes.

/* Version directa: todo a border-box, sin excepciones. */
*, *::before, *::after { box-sizing: border-box; }

/* Version heredable: permite que un subarbol vuelva a content-box. */
:root { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

La primera es más simple y es la que usa casi todo el mundo. La segunda paga una indirección a cambio de poder escribir .widget-de-terceros { box-sizing: content-box; } y que el cambio alcance a todo el subárbol; es útil cuando integras HTML que no controlas y que asume el modelo antiguo.

Incluye los pseudo-elementos en el selector: no los heredan del elemento que los genera y sin ellos te quedan dos cajas con un modelo distinto al resto.