Resolviendo problemas con padding y border - usando box sizing

Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, asi que una nueva propiedad CSS llamada box-sizing fué creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aqui está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="simple">

¡Ahora somos del mismo tamaño!

</div>

<div class="fancy">

¡Hurra!

</div>

Ya que esto es mucho mejor, algunos autores quieren que todos los elementos de sus páginas trabajen de la misma manera. Estos autores ponen lo siguiente en sus páginas:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Esto asegura que el tamaño de todos los elementos siempre será modificado de la manera más intuitiva.

Ya que box-sizing es bastante nuevo, te recomiendo usar los prefijos -webkit- y -moz- por ahora, como yo los uso en el ejemplo. Esta técnica permite funciones experimentales en navegadores específicos. También, ten en cuenta que es compatible con IE8+.