box-sizing

Com o tempo, as pessoas perceberam que aquela matemática não era interessante. Logo, criaram uma propriedade do CSS chamada box-sizing. Quando você define box-sizing: border-box; em um elemento, os valores do padding e do border não são adicionados em sua largura. Aqui está o mesmo exemplo da página anterior, porém com a propriedade box-sizing: border-box; aplicada nos dois 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;
}

Já que isso é bem melhor, algumas pessoas definem que todos os elementos em suas páginas funcionem dessa forma. Alguns escrevem o seguinte CSS em suas páginas:

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

Isso assegura que todos os elementos serão dimensionados da maneira mais intuitiva.

Uma vez que a propriedade box-sizing é muito nova, é recomendado utilizar os "vendor prefixes" -webkit- e -moz- por enquanto, como foram demonstrados nos exemplos. E tenha em mente que essa propriedade é somente IE8+.