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.
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;
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.
Para explicarte mejor aquí te muestro un ejemplo con 2 cajas, las 2 tienen un width de 400px, tienen un padding de 20px por lado y 10px de borde. La primera caja tiene border-sizing:content-box; por lo que el ancho real es de 480, mientras que por otro lado la otra caja tiene border-sizing:border-box; y su ancho total de 400px.
See the Pen Box-sizing by Carlos Arturo Esparza (@falconmasters) on CodePen.
[…] Articulo sobre propiedad Box-sizing: https://www.falconmasters.com/css/cambiando-modelo-de-caja-box-sizing-css/ […]
Hace unas semanas, estaba tratando de usar esta propiedad para imitar el menú de un sitio, en el cual todas las «cajas» de las opciones (Inicio, Categorias….etc.) estaba del mismo tamaño, pero por alguna razón no me funciono. Quizás me falto algo pero no estoy seguro, y ahora que veo este, espero lograr hacerlo hehe.
Gracias por compartir! =)
Respondo para decir que: ME FUNCIONO!! =’D (sigo sin saber porque aquellas vez no)
Gracias! xD
Genial que te haya funcionado, la verdad es que es genial esta propiedad!
Esto he tratado de usarlo en las etiquetas de enlace, ya que estoy en un proyecto de crear botones y la verdad no pude usarla. Tuve que crear un elemento padre para cada y ahora si aplicar los margenes y la propiedad box-sizing. Es muy buena tu página por cierto. Saludos
Muchas gracias :)
[…] Una de las propiedades que llego para solucionarnos la vida en el diseño web es la propiedad box-sizing, propiedad que nos permite cambiar el modelo de caja y ajustarlo a nuestras necesidades, si aun no sabes acerca de box-sizing te recomiendo leer antes este articulo: Como cambiar el modelo de caja de los navegadores con Box-sizing CSS […]
El box-sizing:border-box no me funciona con margin solo con padding, alguien sabe porque o es asi como funciona la propiedad, y tu pagina es muy buena y util, gracias por tus aportes.
Con margin no funciona, solo con padding, un truco que te podria recomendar es que en vez de agregarle un margin le pongas un border transparent con el tamaño que querias de margen, porque el borde si funciona con box-sizing:border-box;
aAAAAAAA PUTO SOY
Carlos, muchas gracias por tu tiempo y dedicación al explicar con paciencia tus tutoriales. Gracias por tomarte el tiempo par ac ompartir tus conocimientos con nosotros. He aprendido muchas cosas con tu ayuda. Gracias por tus videos ! Espero que sigas aportando y que nosotros podamos ayudar así como vos. Saludos!
Saludos amigo solo para comentarte que la primera caja tiene 460px no 480px
Solo agrega que el valor border-box establece que las propiedades de ancho y alto del elemento (y las propiedades de min/max) incluyen el contenido, padding y borde, más no el margen.
Falconmaster, necesito hacer una consulta urgente por interno por favor