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.
Typische Fehler
- Ohne border-box arbeiten und sich über umbrechende Spalten wundern.
- Vergessen dass margin nie zur Elementbreite zählt, in keinem der beiden Modelle. Der Außenabstand kommt beim Platzbedarf immer noch dazu.
- Boxgrößen totrechnen statt sie Flexbox oder Grid verteilen zu lasen.
Das Box Model live besichtigen
Du musst dir die Zwiebel nicht vorstellen, dein Browser zeichnet sie dir: Entwicklerwerkzeuge öffnen (F12), ein Element in der Elementansicht anklicken, und im Stilbereich erscheint das Box-Model-Diagramm mit den echten Pixelwerten für Inhalt, padding, border und margin, farbig markiert und live. Beim Daraufzeigen leuchten die Zonen sogar direkt auf der Seite auf. Für Layout-Rätsel der Marke "warum ist da so viel Luft" ist diese Ansicht das Diagnosewerkzeug Nummer einss.
Die Sonderfälle der Verrechnung
Zwei Eigenheiten sorgen regelmäßig für Stirnrunzeln. Erstens das Zusammenfallen von Außenabständen: Senkrecht aufeinandertreffende margins addieren sich nicht, der größere gewinnt (Details bei den Abständen). Zweitens Prozentwerte: padding: 10% bezieht sich auf die Breite des Elternelements, auch beim senkrechten padding, das ist Absicht und ermöglicht alte Seitenverhältnis-Tricks, überrascht aber jeden beim ersten Mal. Wer beide Fälle kennt, hat die zwei häufigsten Box-Model-Verwirrungen bereits abgehaktt.