Si tuviste una gran alegría cuando recibiste la noticia de la existencia de esta nueva propiedad, es que has sufrido la maquetación cuando todavía no existía. Cuantos cálculos y cuantos quebraderos de cabeza hemos tenido que pasar para ajustar una "caja" y no digo más si se trataba de crear un grid, establezco un width, añado un borde, no me cabe, lo ajusto, cambio el padding, lo ajusto,... así hasta cuadrar todo. Esta propiedad que nos regaló CSS3 nos ahorró sin duda mucho tiempo.
Para entender lo que hace esta propiedad debemos tener claro el concepto de modelo de caja.
Modelo de caja - Box model
El modelo de caja en diseño web considera que todo elemento HTML es una "caja". Este caja puede tener:
- Contenido = Hello world
- Espacio interior = padding
- Espacio exterior = margin
- Borde = border
Aunque una caja pueda tener contenido + padding + margin + border, el ancho y el height de una caja lo estable realmente su contenido, cualquier espacio que quiera añadir adicional es aparte.
WIDTH = CONTENT
Esto traducido en CSS significa que cuando establezco un width a un div por ejemplo, se lo estoy dando para albergar sólo su contenido. Cualquier espacio interior o borde que añada a la caja hará que el tamaño de mi caja aumente. Por tanto el ancho de mi caja será la suma de las propiedades width, padding y borde.
width total = width contenido + padding left + padding right + border width left + border width right
La misma lógica es aplicada a la altura.
¿Cómo sé entonces el ancho que le tengo que dar a mi caja?
Teniendo en cuenta la lógica anterior:
width css = width deseado - padding left - padding right - border width left - border width right
Por ejemplo, imaginemos que yo quiero crear una caja con las siguientes características:
- Ancho: 200 píxeles
- Espaciado interior: 20 pixeles
- Borde: 5 píxeles
Según este modelo si yo quiero tener un ancho total de 200px, el valor de mi width en la css debe ser realmente:
200px (ancho deseado) - 20px (espacio por la izquierda) - 20px (espacio por la derecha) - 5px (borde por la izquierda) - 5px (border por la derecha) = 150 px. Esto en css se traduciría en:
div{
width: 150px;
padding: 20px;
border: 5px solid;
}
Como veis esto es una autentica locura, sobre todo cuando crear layouts complejos.
Box sizing
Y entonces llegó box-sizing. Con esta propiedad podemos cambiar la manera en que los navegadores interpretan el modelo de caja. Podemos cambiar el comportamiento descrito anterior y hacer que una caja incluyan su padding y su borde en su width.
WIDTH= CONTENT + PADDING + BORDER
Veamos los valores que tiene esta propiedad :
content-box
Este es el valor por defecto y el que respeta el modelo de caja tradicional. Como venimos diciendo la propiedad width y height sólo incluyen el ancho y el alto de su contenido pero no el padding ni el borde.
padding-box
Con este valor indicamos que en el width y height vamos a incluir el padding. Sin embargo este valor sólo es soportado por Firefox.
border-box
Este valor indica que vamos a incluir tanto el padding como el borde cuando definamos el width de una caja. Este mágico valor es el que vamos a utilizar constantemente.
Con esta propiedad y este valor ya no tenemos que hacer cáculos a la hora de estrablecer un ancho a nuestro div ya que el ancho que indiquemos será el deseado:
width css = width deseado
Y volviendo al ejemplo anterior nuestra css quedaría de la siguiente manera:
div{
box-sizing:border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
Compatibilidad en navegadores
 |
 |
 |
 |
 |
||
|---|---|---|---|---|---|---|
| >IE7 | IE8 | IE9< | ||||
 |
|
|
|
 |
|
|
(*) El valor padding-box sólo es soportado por Firefox