box-sizing

Controla si width y height miden solo el contenido o incluyen también el padding y el border. En una frase: decide qué abarca el ancho que declaro.

Cómo funciona

Todo elemento es una caja de cuatro capas (contenido → padding → border → margin). Cuando declarás width: 300px, la pregunta es: ¿esos 300px son el contenido solo, o la caja entera hasta el border? box-sizing define esa respuesta.

Por defecto el navegador usa content-box: los 300px son solo el contenido, y cualquier padding o border se suma por fuera, agrandando el tamaño real del elemento. Esto vuelve el cálculo de tamaños un dolor de cabeza, porque el número que escribís no es el que ocupa el elemento en pantalla.

Con border-box, los 300px son el total de la caja: el padding y el border se acomodan hacia adentro y es el área de contenido la que se encoge para que la caja siga midiendo lo declarado. El margin nunca entra en este cálculo (siempre es espacio externo).

Sintaxis

.caja {
  box-sizing: border-box;
}

Valores

content-box (valor por defecto del navegador)

Con content-box, width y height miden únicamente el área de contenido — la zona donde vive el texto o los elementos hijos. El padding y el border no están incluidos: se suman por fuera de ese ancho, agrandando el espacio total que ocupa el elemento en pantalla.

Esto significa que el número que escribís en width no es el tamaño real del elemento. Para saber cuánto ocupa realmente, tenés que hacer la cuenta vos:

tamaño real = width + padding-left + padding-right + border-left + border-right

Con width: 300px, padding: 20px y border: 2px, el elemento ocupa 344px en pantalla (300 + 20 + 20 + 2 + 2). Si después le agregás más padding o cambiás el border, el elemento crece y puede romper el layout sin que hayas tocado width. Es el comportamiento histórico de CSS y la fuente de muchos bugs de maquetación.

.caja {
  box-sizing: content-box; /* default */
  width: 300px;
  padding: 20px;
  border: 2px solid;
  /* → ocupa 344px reales en pantalla */
}

border-box

Con border-box, width y height miden la caja completa: contenido + padding + border juntos. El número que declarás es el espacio real que ocupa el elemento en pantalla — sin cuentas, sin sorpresas.

Cuando agregás padding o border, el navegador encoge el área de contenido hacia adentro para que la caja siga midiendo exactamente lo que declaraste. La caja no crece: lo que cambia es cuánto espacio le queda al contenido interno.

Con width: 300px, padding: 20px y border: 2px, el elemento ocupa exactamente 300px en pantalla. El área de contenido resulta en 256px (300 − 20 − 20 − 2 − 2). Si después ajustás el padding o el border, el contenido se adapta internamente y el elemento siempre ocupa los 300px declarados. Eso hace el layout predecible y es por eso que todos los proyectos modernos lo usan como reset global.

.caja {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid;
  /* → ocupa 300px reales en pantalla (contenido interno: 256px) */
}

Es el valor que hace que width signifique exactamente lo que parece. Prácticamente todos los proyectos modernos lo aplican como reset global desde el inicio.

Ejemplo realista

Dos tarjetas que deben ir lado a lado, cada una al 50% de ancho con padding interno. Con content-box el padding empuja el total por encima del 50% y la segunda tarjeta cae a la línea de abajo; con border-box las dos encajan justas en la fila.

.fila    { display: flex; }
.tarjeta { box-sizing: border-box; width: 50%; padding: 24px; border: 1px solid teal; }

Cuándo usarlo

En la práctica, siempre border-box. El patrón estándar es resetearlo globalmente al inicio de la hoja para que toda caja del documento sea predecible:

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

Apenas vas a necesitar content-box explícito; existe sobre todo como el default heredado de CSS.

Notas, gotchas e interacción

• box-sizing es la propiedad que vuelve predecibles a width, height, padding y border juntos: cambiarla altera cómo esas cuatro se combinan para dar el tamaño final. No afecta al margin (siempre externo).
• El reset con *::before, *::after incluye a los pseudo-elementos, que por defecto también heredan content-box.
• Cicatriz del sandbox de este sitio: el sandbox ya inyecta *{box-sizing:border-box} en su reset antes de tu CSS (docs/CICATRICES.md A.1.7). Por eso en los ejercicios width ya es el ancho total sin que lo declares explícitamente.

Vigente / legacy

No hay forma legacy: box-sizing es el estándar actual. En navegadores muy viejos existió con prefijo -webkit-/-moz-, hoy innecesario en cualquier proyecto moderno.