¿Qué es el Box Sizing en CSS? 🤔

¡Hola, gente bonita! 👋
Quizás te has encontrado en muchos ejemplos de CSS la siguiente regla:

*,
*::after,
*::before {
 box-sizing: border-box;
}

Te preguntaras a que se refiere, o porque siempre lo colocan en los estilos. Pues bien, en este articulo te lo explicare hasta con matemáticas…🤭

🧐¿Qué es el box sizing?

La propiedad box-sizing (tamaño de caja) establece como se calcula el ancho y alto total de un elemento. Recuerda que en HTML todos los elementos son una caja y es muy importante comprender que es el box-model (modelo de caja) antes de pasar con el box-sizing.

La propiedad box-sizing tiene dos valores posibles: content-box y border-box. El primero es el valor por defecto así que no es necesario colocarlo. Vamos a explicarlo con unos ejemplos…

📦Content Box

En el box-1 tengo un width de 100px y un height de 120px si yo añado un padding de 5px y un border de 2px ahora la caja va a medir 114px de ancho por 134px de alto. Esto es porque le estoy sumando el padding y border.

.box-1 {
 width: 100px;
 height: 120px;
 padding: 5px;
 border: 2px solid blue;
 box-sizing: content-box;
}

Esto hace que la caja se vea más grande. Para llegar a estas medida total, el navegador hace el siguiente calculo:

final width: width + (padding-left + padding-right) + (border-right + border-left)
final width: 100px + (2 * 5px) + (2 * 2px) = 114px

final height: height + (padding-top + padding-bottom) + (border-top + border-bottom)
final height: 120px + (2 * 5px) + (2 * 2px) = 134px

El comportamiento por defecto de los navegadores al calcular el ancho y alto de un elemento es aplicar la anchura y altura al área de contenido, sin tener en cuenta el borde y padding.

✅Border Box

El border box sirve para evitar lo anterior, si tu necesitas que el elemento mida exactamente lo que especificaste en el width y height (100px x 120px respectivamente), con el valor border-box lo puedes hacer. Border box hace que los elementos mantengan su tamaño y se usa precisamente para que el box model no se rompa.

.box-2 {
 width: 100px;
 height: 120px;
 padding: 5px;
 border: 2px solid blue;
 box-sizing: border-box;
}

Como puedes ver en la imagen el content tiene una medida de 86px de ancho por 106px de alto, si esto lo sumas al padding y border las medidas son las mismas que especificaste en width y height (100px x 120px).

Pero ¿de donde sale 86px x 106px? 🥴. Esto pasa porque en lugar de sumar, el padding y border se restan del ancho y del alto para que después la suma total sean las medidas exactas, este calculo lo hace el navegador de la siguiente manera:

width - (padding-left + padding-right) - (border-right + border-left)
100px - (2 * 5px) - (2 * 2px) = 86px
86px + 10px padding + 4px border = 100px

height - (padding-top + padding-bottom) - (border-top + border-bottom)
120px - (2 * 5px) - (2 * 2px) = 106px
106px + 10px padding + 4px border = 120px

Las diferencias entre content-box y border-box se pueden ver con la siguiente imagen. En el content box el padding y border del elemento se dibujan por fuera de la anchura y altura (se suman), mientras que en border-box, el padding y border se dibujan dentro del ancho y alto (se restan).

⚙️Reset

Para no estar aplicando a cada uno de los elementos la propiedad box-sizing, podemos establecerlo de manera general, es decir, hacemos un “reset” de tal forma que a todos se les aplique el valor border-box, pero podemos hacerlo de dos formas distintas:

1️⃣Universal Box Sizing

Esta regla lo que hace es aplicar la propiedad box-sizing con su valor border-box a todos los elementos y a todos los pseudoelementos (before y after):

*,
*::after,
*::before {
 box-sizing: border-box;
}

2️⃣Universal Box Sizing with Inheritance

Este último reset se considera mejor que la anterior. Por ejemplo si tienes un componente que solo fue diseñado para trabajar con el content-box entonces esta regla nos permite facilitar dicho cambio:

html{
 box-sizing: border-box;
}
*,
*::after,
*::before {
 box-sizing: inherit;
}

Recursos:

• Box Sizing | CSS Tricks
• Box Sizing MDN
• International box-sizing Awareness Day
• * { Box-sizing: Border-box } FTW

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok