CSS-Boxmodell

Das CSS-Box Modell-Modul definiert die margin- und padding-Eigenschaften, die zusammen mit der Höhe, Breite und den Randeigenschaften 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 Stapelungsebene, wobei die Boxmodell-Eigenschaften (und andere) die extrinsische Größe jeder Box und den Raum um sie herum definieren.

Jede Box hat einen rechteckigen Inhaltsbereich, innerhalb dessen Text, Bilder und andere Inhalte angezeigt werden. Der Inhalt kann an einer oder mehreren Seiten von padding, einem border und einem margin umgeben sein. Das padding ist um den Inhalt herum, der border ist um das padding herum und der margin sitzt außerhalb des border. Das Boxmodell beschreibt, wie diese Merkmale - der Inhalt, das padding, der border und der margin - zusammenarbeiten, um eine Box zu erstellen, wie sie von CSS angezeigt wird.

Das CSS-Boxmodellmodul definiert physische (oder "seitenrelative") Eigenschaften wie margin-top und padding-top. Fluss-relative Eigenschaften wie margin-block-start und margin-inline-start (die sich auf die Textausrichtung beziehen) werden in Logische Eigenschaften und Werte definiert. Das Boxmodellmodul wird durch das CSS-Box-Größenmodul erweitert, das den intrinsischen Größenwert einführt und es ermöglicht, das Seitenverhältnis für Elemente zu definieren, die in mindestens einer Dimension automatisch dimensioniert sind.