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.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar