Que es y como se utiliza la propiedad Box-sizing y como nos puede cambiar la vida a la hora de estar trabajando con tamaños en nuestros elementos html.

Cuantas veces no nos ha pasado que tenemos un contenedor con un width de 400px muy bonito con su diseño espectacular y medidas exactas, pero de pronto cambiamos de opinión y agregamos 1 misero pixel de borde, 1 px que nos hecha a perder el contenedor muchas veces, o peor aun si agregamos un padding. A esto por ejemplo a la hora de hacer un diseño con columnas puede ser un desastre.

La antigua solución a esto era muy fácil pero tediosa, y es que si teníamos un contenedor con un width de 400px simplemente calculábamos 1 px x 2 (porque son 2 lados) + 10px de padding por cada lado nos da un total de 22px que tenemos que restar al width de 400. Por lo que el width terminaría de 378px y el resto para paddings, margenes, etc.


Es un desastre tener que hacer estos cálculos no ? Por fortuna existe algo genial que yo no sabia hasta hace poco y que me habría solucionado muchos, pero muchos problemas.

dim

Box-sizing, la propiedad mágica de los anchos en CSS

Con box-sizing podemos cambiar la forma en la que los navegadores toman el modelo de caja, permitiéndonos hacer cosas geniales, como solucionar problemas como el que te acabo de comentar.

Existen varios valores para esta propiedad, box-sizing:content-box; y box-sizing:border-box; Existe un tercero pero no lo pondré aquí ya que no es tan usado como estos 2.

Box-sizing:content-box;

Lo que nos permite esta propiedad con content-box es hacer nada en realidad porque es como los navegadores ya toman en cuenta el modelo de caja, esta propiedad lo que nos dice es que del ancho que le establecemos empezara a sumar los padding, margenes, bordes, etc. Y volvemos a lo mismo, si tenemos un div con un width de 400 pero le agregamos un border de 1px entonces en realidad el ancho total quedaria de 402px.

Box-sizing:border-box;

box-model

Con border-box es diferente, y es donde surge la verdadera magia de esta propiedad, con border-box podemos decirle al navegador que si tenemos un div con un width de 400px y le agregamos margins, paddings, bordes, etc no los va a sumar, sino que va a restar del contenido y nos va a dar un ancho exacto de 400px.

Tiene una desventaja, claro esta, pero tenemos que sacrificar un poco aveces, la desventaja es que nos muestra el contenedor de 400px exactos, pero el contenido es el que se ve afectado y es donde pierde tamaño.