box-sizing es una propiedad CSS para cambiar el modelo de caja por defecto de los navegadores.
El ancho de un elemento se altera si se le aplica un borde o un padding. Eso es porque la anchura del elemento que tu especificas con CSS, por defecto no incluye borde ni padding.
Un ejemplo: Éste es el efecto que tiene un padding y un borde sobre un elemento de 200px de ancho:
<div style="width:200px;
padding: 20px;
border: 10px solid #ccc;
margin: 0 auto;">
Lorem ipsum...
</div>Como podréis comprobar, no mide 200px de ancho, sino 260px. Es decir:
200px de ancho inicial, más 20px de padding izquierdo, más 20px de padding derecho, más 10px de borde izquierdo, más 10px de borde derecho.
Éste es el modo en el que los navegadores tratan los anchos por defecto. Sería el equivalente a box-sizing: content-box;
box-sizing: border-box
Con border-box, hacemos que el ancho especificado sea el equivalente al ancho total. Es decir:
<div style="width: 200px;
padding: 20px;
border: 10px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;">
Lorem ipsum...
</div>Como podréis comprobar, ahora ese elemento exactamente 200px, ni uno más, ni uno menos.
Esto es muy útil para elementos fluídos, cuando necesitas que el elemento ocupe (por ejemplo) un 33% del ancho, y si ocupa un píxel más toda la estructura se iría a tomar por culo estropearía.
box-sizing: padding-box;
Este valor no es tan útil como border-box, pero lo puede ser en ciertos casos. Lo que hace es que la anchura sea la del contenido y el padding (por lo que se le sumará el borde). Es experimental y sólo está implementada en Firefox, por lo que tampoco deberías usarla.
<div style="width:200px;
padding: 20px;
border: 10px solid #ccc;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
margin: 0 auto;">
Lorem ipsum...
</div>Ahora podréis ver (si entráis con firefox) que el elemento es 220px de ancho (200 entre contenido y padding y 10 de cada lado de borde).