DEV Community

loading...

¿Qué es el Box Sizing en CSS? 🤔

lupitacode profile image Lupita Code 🌄 Originally published at lupitacode.Medium ・3 min read

Alt Text

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

*,
*::after,
*::before {
 box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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).

Alt Text

⚙️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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Recursos:

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

📷Instagram
🐦Twitter

Discussion (6)

pic
Editor guide
Collapse
dlunamontilla profile image
David E Luna M

Me alegra mucho que hayas empezado a escribir por acá. Tienes un corazón.

Collapse
lupitacode profile image
Lupita Code 🌄 Author

Muchas gracias!! :)

Collapse
jmr_code_social profile image
Jorge Marquez

Buen post, buena explicación!

Collapse
lupitacode profile image
Lupita Code 🌄 Author

Muchas gracias!! :)

Collapse
jaaneo profile image
Alejandro Sáez M

Me gustó mucho tu post, gracias por la explicación sobre todo con ejemplo matemático.. Saludos.

Collapse
lupitacode profile image
Lupita Code 🌄 Author

¡Muchas gracias! por leer mi articulo :)