Box-sizing te ayuda a encontrar el tamaño exacto

Cuando establecemos el tamaño de un elemento se aplica sin contar el padding y el border, por lo que el tamaño de ambos se añade al contenedor y puede hacer variar las medidas.
Esto supone un problema, ya que el ancho especificado varía al sumarle los rellenos y bordes, pero con box-sizing podemos evitarlo perfectamente y es totalmente compatible con la mayoría de navegadores.

El ejemplo anterior ilustra que pasaría si usásemos box-sizing con dos de sus funciones básicas, que son content-box y border-box, que especifican a que le aplicamos el ancho (width).
Si se lo aplicamos al contenido con content-box (por defecto es así) el bloque sin contar rellenos y bordes será del tamaño establecido y de no ser así y usar border-box aplicaremos el ancho (width) al total, por lo que el contenido tendrá el espacio equivalente al que hayamos establecido restándole los rellenos y bordes.
La teoría muchas veces no es fácil de explicar ni entender sin un ejemplo, en los siguientes puntos se puede ver mejor la comparación.

Utilidad

En la actualidad nos podemos encontrar con la situación de que queremos poner en línea varios bloques, y por un borde (o relleno) uno de los elementos se pasa a abajo.
Esto cuando se hace con medidas absolutas (como px) no hay ningún problema en restarle esos píxeles extra al ancho o alto, pero cuando se usan medidas relativas (como porcentajes) puede que se desborden los elementos.

Este primer ejemplo tiene el box-sizing por defecto, por lo que el padding se suma al ancho, a diferencia del ejemplo de abajo, que el padding no influencia al ancho.

Uso con bordes

Al igual que lo hemos hecho con el padding podemos hacerlo con bordes, que dejarán de ocupar esos píxeles que muchas veces molestan en nuestros diseños.

Estos dos ejemplos son idénticos al anterior solo que cuentan con un borde de más, por lo que vemos la facilidad con la que nos quitamos estar restando el tamaño del padding y del border al tamaño del bloque.

El código que hemos puesto en uso para los casos que encajaban bien es el siguiente:

Resumen

Esta propiedad CSS nos puede evitar tener que hacer encajar elementos que tengan rellenos o bordes, por lo que es conveniente tenerla muy presente, además tiene una compatibilidad con casi todos los navegadores.