box-sizing

Au fil du temps, les gens se sont rendus compte que les maths ce n'était pas marrant, donc une nouvelle propriété CSS appelée box-sizing fût créée. Quand vous ajoutez la propriété box-sizing: border-box; à un élément, le padding et la bordure de cet élément n'augmentent plus sa largeur. Ci-dessous, le même exemple que dans la page précédente, mais avec la propriété box-sizing: border-box; sur les deux éléments :

.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;
}

C'est tellement mieux que certains auteurs veulent que tous les éléments de toutes leurs pages fonctionnent de la même manière. Ils ajoutent donc ce bout de CSS à leurs pages :

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

Cela force tous les éléments à être toujours dimensionnés de cette façon plus intuitive.

Puisque box-sizing est plutôt récent, vous devriez utiliser les préfixes -webkit- et -moz- pour l'instant, comme je l'ai fait dans mes exemples. Cette technique autorise des fonctionnalités expérimentales dans des navigateurs spécifiques. N'oubliez pas que cette propriété est compatible à partir d'IE8+.