En la lección anterior descubriste que cuando le dices a un elemento width: 300px, el tamaño real puede ser mucho mayor porque el padding y el borde se suman por fuera. Eso es frustrante cuando intentas que un elemento encaje en un espacio exacto.
¿No sería genial poder decirle a CSS: "cuando digo 300px, quiero que el elemento final mida 300px, punto"?
Eso es exactamente lo que hace box-sizing.
La propiedad box-sizing controla a qué capa de la caja se aplica el width y el height que defines.
Por defecto, su valor es content-box — el tamaño se aplica solo a la capa del contenido, y el padding y el borde se suman encima.
Pero si lo cambias a border-box, el tamaño se aplica a la capa del borde — la más externa de las que cuentan para el tamaño. Esto significa que el elemento final medirá exactamente lo que dices, y CSS calculará automáticamente cuánto espacio queda para el contenido.
Ahora el elemento mide exactamente 300px de ancho y 200px de alto. El padding y el borde ya están incluidos dentro de esas dimensiones.
Esto es tan útil que la mayoría de desarrolladores profesionales lo aplican a todos los elementos al inicio de su CSS:
De esta forma, todos los elementos del proyecto se comportan de manera predecible: el tamaño que dices es el tamaño que obtienes. Sin sorpresas matemáticas.
Haz que .mi-caja tenga width: 300px, height: 200px y box-sizing: border-box. Si quieres experimentar un poco más, añade luego padding y borde para comprobar que esas dimensiones siguen respetándose.
El control total sobre las dimensiones — al fin...