CSS-Boxmodell

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

Jedes sichtbare Element auf einer Webseite ist eine Box, die gemäß dem visuellen Formatierungsmodell angeordnet ist. 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 definieren.

Jede Box hat einen rechteckigen Inhaltsbereich, in dem Text, Bilder und andere Inhalte angezeigt werden. Der Inhalt kann von Padding, einem Rahmen und einem Rand auf einer oder mehreren Seiten umgeben sein. Das Padding umgibt den Inhalt, der Rahmen umgibt das Padding, und der Rand befindet sich außerhalb des Rahmens. Das Boxmodell beschreibt, wie diese Merkmale – der Inhalt, das Padding, der Rahmen und der Rand – zusammenarbeiten, um eine Box zu erstellen, wie sie von CSS angezeigt wird.

Das CSS-Boxmodell-Modul definiert physische (oder „seitenbezogene“) Eigenschaften wie margin-top und padding-top. Flussbezogene Eigenschaften wie margin-block-start und margin-inline-start (die sich auf die Textrichtung beziehen) werden in den logischen Eigenschaften und Werten definiert. Das Boxmodell-Modul wird durch das CSS-Box-Sizing-Modul erweitert, welches den Wert für die intrinsische Größe einführt und das Festlegen von Seitenverhältnissen für in mindestens einer Dimension automatisch skalierte Elemente ermöglicht.