CSS-Boxmodell

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

Jedes sichtbare Element auf einer Webseite ist eine Box, die entsprechend dem visuellen Formatierungsmodell angeordnet wird. CSS-Eigenschaften definieren deren Größe, Position und Stapelreihenfolge, wobei die Eigenschaften des Boxmodells (und andere) die extrinsische Größe jeder Box und den Raum um sie herum bestimmen.

Jede Box hat einen rechteckigen Inhaltsbereich, in dem Text, Bilder und andere Inhalte angezeigt werden. Der Inhalt kann von einem Abstand, einem Rand und einem Außenabstand an einer oder mehreren Seiten umgeben sein. Der Abstand ist um den Inhalt herum, der Rand um den Abstand, und der Außenabstand sitzt außerhalb des Randes. Das Boxmodell beschreibt, wie diese Merkmale — der Inhalt, der Abstand, der Rand und der Außenabstand — zusammenarbeiten, um eine Box zu erstellen, wie sie von CSS angezeigt wird.

Das CSS-Boxmodell-Modul definiert physische (oder "seitenspezifische") Eigenschaften wie margin-top und padding-top. Flussbezogene Eigenschaften wie margin-block-start und margin-inline-start (die sich auf die Textrichtung beziehen) sind in Logische Eigenschaften und Werte definiert. Das Boxmodell-Modul wird durch das CSS-Boxgrößenbestimmung-Modul erweitert, das den Wert für die intrinsische Größe einführt und die Definition des Seitenverhältnisses für Elemente ermöglicht, die in mindestens einer Dimension automatisch dimensioniert werden.