CSS-Box-Modell

Das CSS-Box-Modell-Modul definiert die margin- und padding-Eigenschaften, die zusammen mit der Höhe, der Breite und den Randeigenschaften das CSS-Box-Modell bilden.

Jedes sichtbare Element auf einer Webseite ist ein Kasten, der gemäß dem Visuellen Formatierungsmodell angeordnet ist. CSS-Eigenschaften definieren ihre Größe, Position und Stapelreihenfolge, wobei die Box-Modell-Eigenschaften (und andere) die extrinsische Größe jedes Kastens und den Raum um sie herum definieren.

Jeder Kasten hat einen rechteckigen Inhaltsbereich, in dem jeglicher Text, Bilder und anderer Inhalt angezeigt werden. Der Inhalt kann auf einer oder mehreren Seiten von Polsterung, Rand und Außenabstand umgeben sein. Die Polsterung befindet sich um den Inhalt, der Rand befindet sich um die Polsterung, und der Außenabstand befindet sich außerhalb des Randes. Das Box-Modell beschreibt, wie diese Eigenschaften — Inhalt, Polsterung, Rand und Außenabstand — zusammenarbeiten, um einen Kasten zu formen, wie er von CSS angezeigt wird.

Das CSS-Box-Modell-Modul definiert physische (oder "seitenbezogene") Eigenschaften wie margin-top und padding-top. Flussbezogene Eigenschaften wie margin-block-start und margin-inline-start (die mit der Textausrichtung zusammenhängen) werden in Logische Eigenschaften und Werte definiert. Das Box-Modell-Modul wird durch das CSS-Box-Sizing-Modul erweitert, das den intrinsischen Größenwert einführt und die Definition des Seitenverhältnisses für Elemente ermöglicht, die in mindestens einer Dimension automatisch skaliert werden.