Das Box Model

Wenn wir über die Breite von HTML-Elementen sprechen, müssen wir auch über die damit zusammenhängenden Probleme sprechen: Das box model. Denn wenn du die Breite eines Elements festlegst, kann es durchaus sein, dass das Element größer wird, als du wolltest, denn der Rahmen (border) und Innenabstand (padding) werden das Element über die definierte Breite hinaus vergrößern. Schau dir das folgende Beispiel an in welchem zwei Elemente mit dem selben Wert in width trotzdem verschiedene Breiten erhalten.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Seit Generationen löst man dieses Problem mit Mathematik: CSS-Autoren verwendeten in ihren Stylesheets einen kleineren Wert für width als erwünscht, indem sie die Werte von padding und border davon subtrahierten. Glücklicherweise ist dies heutzutage nicht mehr nötig.