box-sizing controla qué miden realmente las propiedades width y height. El valor por defecto (content-box) mide solo el contenido; border-box hace que incluyan padding y borde.
box-sizing controla qué miden realmente las propiedades width y height. El valor por defecto (content-box) mide solo el contenido; border-box hace que incluyan padding y borde.
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
Con content-box, el padding y el borde se agregan encima de width, por lo que el elemento termina siendo más ancho que el número que estableciste. Esto rompe los diseños: un cuadro width: 50% con padding se desborda de su 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Con border-box, width es el ancho renderizado final — el padding y el borde se restan desde el interior. El número que estableces es el tamaño que obtienes, lo cual es mucho más intuitivo.
*, *::before, *::after {
box-sizing: border-box;
}
Casi todas las hojas de estilo modernas, frameworks y reiniciadores aplican esto globalmente. Hace que el tamaño sea predecible: width: 50% + padding permanece exactamente 50% de ancho, dos cuadros width: 50% se sientan uno al lado del otro sin desbordarse, etc.
border-box elimina la fuente única más común de dolores de cabeza de diseño — tener que sumar mentalmente padding y borde a cada ancho.
Establecerlo globalmente se considera una práctica predeterminada recomendada, porque "el ancho que establecer es el ancho que obtengo" es cómo naturalmente esperas que funcione el tamaño.