Box Sizing CSS

Box Sizing CSS

CSS box-sizing permite que incluyamos el relleno interno (relleno) y el borde en el ancho y la altura totales del elemento.

Supongamos que no se especifica la propiedad CSS box-sizing

Por defecto, el ancho y la altura del elemento se calculan así:

  • width + padding + border = anchura real del elemento
  • height + padding + border = altura real del elemento

Esto significa: cuando configura el ancho / altura del elemento, el elemento generalmente parece más grande de lo que ha configurado (porque el borde y el relleno interno se han añadido al ancho / altura especificados del elemento).

La siguiente imagen muestra dos elementos <div> con el mismo ancho y altura especificados:

Este div es más pequeño
(ancho de 300px, altura de 100px).
Este div es más grande
(también de 300px de ancho, 100px de altura).

Los dos elementos <div> anteriores muestran diferentes tamaños en el resultado final (porque div2 especifica el relleno interno):

Ejemplo

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Prueba personal

box-sizing resuelve este problema.

Si se utiliza la propiedad CSS box-sizing

box-sizing permite que incluyamos el relleno interno y el borde en el ancho y la altura totales del elemento.

Si se configura la propiedad en el elemento box-sizing: border-box;entonces el ancho y la altura incluirán el relleno interno y el borde:

¡Ahora dos div tienen el mismo tamaño!
¡Hurra!

Este ejemplo es el mismo que el anterior, ambos elementos <div> han configurado box-sizing: border-box;:

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;
}

Prueba personal

Debido a que se utiliza box-sizing: border-box; de manera tan efectiva, muchos desarrolladores desean que todos los elementos en la página funcionen de esta manera.

El siguiente código asegura que todos los elementos se ajusten de esta manera más intuitiva. Muchos navegadores ya están utilizando box-sizing: border-box;（pero no todos - por eso input y textarea se ven diferentes cuando width: 100%;）.

Aplicarlo a todos los elementos es seguro y inteligente:

Ejemplo

* {
  box-sizing: border-box;
}

Prueba personal

Propiedad Box Sizing CSS

Atributo Descripción
box-sizing Definir el cálculo de anchura y altura de los elementos: si deben incluir márgenes internos (padding) y bordes.