Propiedad box-sizing de CSS

La propiedad box-sizing de CSS sirve para decidir cómo se va a calcular el ancho y alto de un elemento. Cuando usamos las propiedades width y height en un elemento, como un div por ejemplo, por defecto se aplican al área de contenido de la caja. Es decir, se excluye el padding y el border, lo que da como resultado que el ancho real del elemento sea la suma se esas medidas más el espaciado interno y el borde.

De entrada puede no parecer muy útil, pero hay ocasiones en las que nos puede interesar definir las dimensiones finales de un elemento con independencia de lo que haya en su interior. Cuando trabajamos en CSS con porcentajes para hacer una maquetación responsive es especialmente interesante, ya que podemos jugar con cómo se comportarán las cajas a diferentes resoluciones.

Valor box-sizing: content-box

Cuando utilizamos el valor content-box, estamos indicando que a las dimensiones de un contenido (ancho y alto) se le sumará el margin, padding o border que le agreguemos al mismo. Este es valor inicial de la propiedad box-sizing y que se aplica por defecto a cualquier elemento cuando el navegador renderiza el HTML de la página web.

.elemento-content-box{
  width: 500px;
  height: 300px;
  padding: 80px;  
  border: 5px solid #cccccc;
  box-sizing: content-box;
}

Siguiendo lo anterior, el ancho total del elemento sería de 670px, ya que a los 500px de width hay que sumarle 80px de padding-left y padding-right, así como 5px de border-right y border-left.

Valor box-sizing: border-box

Con el valor border-box le estamos diciendo a la propiedad box-sizing que al ancho y alto de un elemento no se le sumará nada más y será el tamaño final. Por tanto, cualquier otra propiedad que tradicionalmente incremente su volumen tendrá que ajustarse hacia adentro.

.elemento-border-box{
  width: 500px;
  height: 300px;
  padding: 80px;  
  border: 5px solid #cccccc;
  box-sizing: border-box;
}

En el anterior ejemplo el ancho total del elemento sería el mismo que definimos en la propiedad width, es decir, 500px. En ese ancho se computa también el padding y el border. Como verás esto nos permite ajustar un elemento a un tamaño final sin preocuparnos en tener que andar restando en caso de que tengamos aplicados espacios extras.

Una vez visto qué es y para qué sirve la propiedad box-sizing de CSS, como maquetador web freelance puedo decir que su utilidad es especialmente interesante cuando trabajamos con porcentajes en las cajas, ya que simplifica mucho la manera de trabajar con ellas.

---

Referencias:

• Dimensionamiento de cajas CSS >> La propiedad box-sizing (inglés) – W3C Working Draft