Tamaños de Caja CSS

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

Sin la propiedad box-sizing

Por defecto, el ancho y el alto de un elemento es calculado así:

ancho + relleno + borde = ancho real de un elemento

alto + relleno + borde = alto real de un elemento

Lo que significa que: Cuando se establece el ancho/alto de un elemento, el elemento a menudo aparece más grande de lo que se ha establecido. Esto es porque el borde y el relleno del elemento se agregan al ancho / alto especificado del elemento.

El siguiente ejemplo se muestran dos elementos <div> establecidos con el mismo ancho y alto, pero al segundo se le establece un relleno.

CSS:

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

Muestras:

La propiedad box-sizing soluciona este problema.

Con la propiedad box-sizing

La propiedad box-sizing permite incluir el relleno y el borde en el anco y alto total del elemento.

Para establecerlo se define box-sizing: border-box; a un elemento, y así el resultado se muestra a continuación:

CSS:

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

Muestras:

Ya que el resultado del uso de box-sizing: border-box; es mucho mejor, muchos desarrolladores desean que todos los elementos en sus páginas funciones de esta manera.

Mucho navegadores web ya usan box-sizing: border-box; para muchos de los elementos, pero no de todos. Por lo cual las entradas de texto de área lucen con diferente ancho al 100%, por nombrar un ejemplo.

El código siguiente, asegura que a todos los elementos apliquen para este comportamiento:

* {
  box-sizing: border-box;
}

Referencias