Tamaño del cuadro CSS
Tamaño del cuadro CSS
La propiedad CSS box-sizingnos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Sin la propiedad de tamaño de caja CSS
De forma predeterminada, el ancho y la altura de un elemento se calculan así:
ancho + relleno + borde = ancho real de un elemento
alto + relleno + borde = 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 box-sizingpropiedad resuelve este problema.
Con la propiedad CSS box-sizing
La box-sizingpropiedad nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Si establece box-sizing: border-box;en un elemento, el relleno y el borde se incluyen en el ancho y la altura:
Aquí está el mismo ejemplo que el anterior, con 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 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 el tamaño de esta forma más intuitiva. Muchos navegadores ya usan 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%;).
Aplicar esto a todos los elementos es seguro y sabio:
Ejemplo
* {
box-sizing: border-box;
}
Propiedad de tamaño de cuadro CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |