Diferencias entre box-sizing: border-box y box-sizing: content-box

Introducción

En CSS, la propiedad box-sizing determina cómo se calcula el tamaño total de un elemento. Afecta directamente a las propiedades width y height, por lo que comprenderla es clave para diseñar interfaces consistentes y evitar errores visuales.

El modelo de caja en CSS

Cada elemento HTML se representa como una caja compuesta por:

Contenido (content): el área donde se muestra el texto o imágenes.

Padding: espacio entre el contenido y el borde.

Border: el borde del elemento.

Margin: espacio exterior que separa el elemento de otros.

Por defecto, los navegadores usan el modelo content-box, pero la práctica moderna favorece border-box.

`box-sizing: content-box` (valor por defecto)

En este modo, el tamaño (width y height) solo incluye el contenido.
El padding y el border se suman al tamaño total.

box-sizing.css

div {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
}

Resultado real:
Ancho total = 200 + 20 + 20 + 10 + 10 = 260px
El elemento ocupa más espacio del esperado.

box-sizing: border-box

Aquí, width y height incluyen el contenido, el padding y el border.
El navegador ajusta internamente el área del contenido.

box-sizing.css

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
}

Resultado real:
Ancho total = 200px exactos
El contenido se adapta para mantener el tamaño total.

Configuración recomendada

El siguiente snippet aplica border-box globalmente, garantizando coherencia en todo el diseño:

index.css

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

Esta práctica es estándar en frameworks como TailwindCSS, Bootstrap y Normalize.css.

Conclusión

Usar box-sizing: border-box simplifica el desarrollo y evita errores de cálculo en el diseño.
Aunque content-box sigue siendo el valor por defecto, border-box se ha convertido en el estándar para maquetaciones modernas y escalables.