Das Box Model: Jedes Element ist ein Karton
Für den Browser ist jedes Element eine rechteckige Box aus vier Schichten, von innen nach außen: der Inhalt, das padding (Polster), der border (Rahmen) und der margin (Außenabstand). Wer Layouts versteht, versteht dieses Zwiebelprinzip.
Die Gretchenfrage: Was zählt zur Breite?
Jetzt wird es historisch interessant. Im klassischen Modell (box-sizing: content-box, der Standard) meint width nur den Inhalt. padding und border kommen obendrauf:
CSS-Code
.karte {
width: 300px;
padding: 20px;
border: 2px solid black;
}
/* tatsächliche Breite: 300 + 20 + 20 + 2 + 2 = 344 Pixel */Drei Boxen zu je "300 Pixeln" nebeneinander sind dann plötzlich breiter als die gedachten 900, und das Layout bricht um. Generationen von Entwicklern haben an dieser Rechnung verzweifelt, zumal der alte Internet Explorer zeitweise anders rechnete als alle anderen, eine der Lieblingsepisoden aus den Browserkriegen.
Die Lösung: border-box
* {
box-sizing: border-box;
}Mit border-box bedeutet width die Gesamtbreite inklusive padding und border, der Inhalt schrumpft entsprechend. 300 Pixel sind dann wirklich 300 Pixel, so wie es die Intuition erwartet. Diese Zeile, angewendet auf alle Elemente über den Universalselektor, steht heute am Anfang praktisch jedes Stylesheets, auch bei diesem Wiki. Sie ist vermutlich die meistkopierte CSS-Regel der Weltt.