Nach dem Box-Modell ist jedes Element im Dokument eine rechteckige Box aus vier Schichten. Wer versteht, wie sie zusammenwirken, versteht die meisten Layoutfragen.
- Box-Modell
Das Modell, nach dem jedes Element als rechteckige Box aus Inhalt, Innenabstand, Rahmen und Außenabstand dargestellt wird.
Beispiel: „Das Box-Modell gilt für jedes Element, auch für Text im Fluss.“
Die vier Schichten
Der Inhalt in der Mitte, darum der Innenabstand, darum der Rahmen, darum der Außenabstand. Der Hintergrund einer Box reicht bis zum Rahmen, der Außenabstand bleibt durchsichtig.
Wie sich die Größe ergibt
In der Voreinstellung meint eine Breitenangabe nur den Inhalt. MDN rechnet es vor: 350 Pixel Breite, 25 Pixel Innenabstand und 5 Pixel Rahmen ergeben 410 Pixel auf der Seite. Mit box-sizing auf border-box bleiben es 350.
Der Außenabstand zählt in beiden Fällen nicht mit: The margin is not counted towards the actual size of the box.