box-sizing es una propiedad CSS que nos permite incluir el relleno, el padding y el borde en el ancho y alto total de un elemento.
Por defecto, el ancho y alto de un elemento se calcula así:
ancho + relleno + borde = ancho real de un elemento
alto + relleno + borde = alto real de un elemento
Esto significa: cuando establece el ancho / alto de un elemento, el elemento a menudo aparece más grande de lo que ha establecido (porque el borde y el relleno del elemento se agregan al ancho / alto especificado del elemento).
Dado que el resultado de usar el box-sizing: border-box; es mucho mejor, muchos desarrolladores quieren que todos los elementos de sus páginas funcionen de esta manera.
El siguiente código garantiza que todos los elementos tengan un tamaño más intuitivo. Muchos navegadores ya utilizan box-sizing: border-box; muchos elementos de formulario (pero no todos, por lo que las entradas y las áreas de texto se ven diferentes en el ancho: 100%;).
* {
box-sizing: border-box;
}
