¿Qué es el Box Sizing en CSS? 🤔
Tags: css, spanish
Published: 2021-04-19 19:21:00

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmi6ase1gdezqbtnlb5j.jpg)

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

```css
*,
*::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.

```css
.box-1 {
 width: 100px;
 height: 120px;
 padding: 5px;
 border: 2px solid blue;
 box-sizing: content-box;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8u4atgxl41maupxvbkq.png)

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.

```css
.box-2 {
 width: 100px;
 height: 120px;
 padding: 5px;
 border: 2px solid blue;
 box-sizing: border-box;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tr5dgjkxwgnw7hxoqp0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88hwiwderf9uk6ildd7w.jpg)

## ⚙️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):

```css
*,
*::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:

```css
html{
 box-sizing: border-box;
}
*,
*::after,
*::before {
 box-sizing: inherit;
}
```
###Recursos:
- [Box Sizing | CSS Tricks](https://css-tricks.com/box-sizing/)
- [Box Sizing MDN](https://developer.mozilla.org/es/docs/Web/CSS/box-sizing)
- [International box-sizing Awareness Day](https://css-tricks.com/international-box-sizing-awareness-day/)
- [* { Box-sizing: Border-box } FTW](https://www.paulirish.com/2012/box-sizing-border-box-ftw/)

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

[▶️Youtube](https://www.youtube.com/lupitacode)
[📷Instagram](https://instagram.com/lupitacode)
[🐦Twitter](https://twitter.com/lupitacode)
[🔵Facebook](https://facebook.com/lupitacode)
[🔲Codepen](https://codepen.io/lupitacode/)
[✍️Medium](https://lupitacode.medium.com/)
[🎵Tik Tok](https://www.tiktok.com/@lupitacode)