box-sizing

Über die Zeit haben Leute festgestellt, dass Mathematik nicht allzu lustig ist. So wurde eine neue CSS-Eigenschaft namens box-sizing geschaffen. Wenn man einem Element die Eigenschaft box-sizing: border-box; gibt, werden die Werte von padding und border nicht mehr der Breite hinzugerechnet. Hier noch einmal das Beispiel der vorherigen Seite aber nun mit box-sizing: border-box; für beide Element:

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

Weil dies so viel besser ist, gibt es CSS-Autoren die möchten, dass sich alle Elemente auf allen ihren Seiten so verhalten. Dazu verwenden sie dieses CSS auf allen ihren Seiten:

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

Damit wird sichergestellt, dass die Größe aller Elemente auf diese intuitivere Weise definiert werden kann.

Weil box-sizing ziemlich neu ist, sollte man die vendor-prefixes -webkit- und -moz- benützen, wie ich es in diesen Beispielen getan habe. Mit dieser Technik können die experimentellen Eigenschafen für spezifische Browser freigeschaltet werden. Ebenfalls ist zu beachten, dass dies erst ab IE8+ funktioniert.