Box Sizing CSS
La propiedad box-sizing CSS nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Sin la propiedad box-sizing
De forma predeterminada, el ancho y alto de un elemento se calculan así:
width + padding + border = ancho real de un elemento height + padding + border = altura real de un elemento
Esto significa: cuando establece el ancho/alto de un elemento, el elemento a menudo parece más grande de lo que ha establecido (porque el borde y el relleno del elemento se agregan al ancho/alto especificado del elemento).
La siguiente ilustración muestra dos elementos <div> con el mismo ancho y alto especificados:
Los dos elementos <div> anteriores terminan con diferentes tamaños en el resultado (porque div2 tiene un relleno especificado):
Ejemplo:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
La propiedad box-sizing resuelve este problema.
Con la propiedad box-sizing
La propiedad box-sizing nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Si estableces la propiedad box-sizing: border-box; en un elemento, el relleno y el borde se incluirán en el ancho y alto:
Aquí está el mismo ejemplo anterior, con la propiedad box-sizing: border-box; agregado a ambos elementos <div>:
Ejemplo:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Dado que el resultado de usar 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 el tamaño de esta forma más intuitiva. Muchos navegadores ya usan box-sizing: border-box; para muchos elementos de formulario (pero no todos, razón por la cual las entradas y las áreas de texto se ven diferentes en el ancho: 100%;).
Aplicar esto a todos los elementos es seguro y sabio:
Ejemplo:
* {
box-sizing: border-box;
}
La propiedad box-sizing
| Propiedad | Descripción |
box-sizing | Define cómo se calculan el ancho y el alto de un elemento: si deben incluir relleno y bordes, o no. |
Traducido con 💚 desde W3Schools.com