in

Tamaño de caja CSS


Tamaño de caja CSS

El CSS box-sizing La propiedad nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.


Sin la propiedad de tamaño de caja de CSS

Por defecto, el ancho y alto de un elemento se calcula así:

ancho + relleno + borde = ancho real de un elemento
altura + relleno + borde = altura 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).

La siguiente ilustración muestra dos elementos

con el mismo ancho y alto especificado:

Este div es más pequeño (el ancho es 300px y el alto es 100px).

Este div es más grande (el ancho también es de 300 px y la altura es de 100 px).

Los dos elementos

anteriores terminan con diferentes tamaños en el resultado (porque div2 tiene un relleno especificado):

Ejemplo

.div1 {
ancho: 300px;
altura: 100px;
borde: 1px azul sólido;
}

.div2 {
ancho: 300px;
altura: 100px;
relleno: 50px;
borde: 1px rojo sólido;
}

Inténtalo tú mismo »

los box-sizing La propiedad resuelve este problema.



Con la propiedad de tamaño de caja de CSS

los box-sizing La propiedad nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.

Si pones box-sizing: border-box; en un elemento, el relleno y el borde se incluyen en el ancho y el alto:

¡Ambos divs tienen el mismo tamaño ahora!

¡Hurra!

Este es el mismo ejemplo que el anterior, con box-sizing: border-box;
agregado a ambos elementos

:

Ejemplo

.div1 {
ancho: 300px;
altura: 100px;
borde: 1px azul sólido;
tamaño de caja: caja de borde;
}

.div2 {
ancho: 300px;

altura: 100px;
relleno: 50px;
borde: 1px rojo sólido;
tamaño de caja: caja de borde;
}

Inténtalo tú mismo »

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 se dimensionen de esta manera 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 prudente:


Propiedad de tamaño de caja CSS

Propiedad Descripción
tamaño de caja Define cómo se calcula el ancho y el alto de un elemento: ¿deben incluir relleno y bordes, o no?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gestión de datos de clientes (CDM) | CX

Compilador Java en línea | Editor de Java