CSS Box-Modell

Das CSS Box-Modell Modul definiert die margin und padding Eigenschaften, die zusammen mit der height, width und den border Eigenschaften das CSS Box-Modell bilden.

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

Jeder Kasten hat einen rechteckigen Inhaltsbereich, in dem Text, Bilder und andere Inhalte angezeigt werden. Der Inhalt kann von Polsterung (=padding), einem Rand (=border) und einem Außenabstand (=margin) umgeben sein, auf einer oder mehreren Seiten. Die Polsterung ist um den Inhalt herum, der Rand ist um die Polsterung herum und der Außenabstand sitzt außerhalb des Randes. Das Box-Modell beschreibt, wie diese Elemente — der Inhalt, die Polsterung, der Rand und der Außenabstand — zusammenarbeiten, um einen Kasten zu erstellen, 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 sich auf die Textrichtung beziehen) sind in Logische Eigenschaften und Werte definiert. Das Box-Modell Modul wird durch das CSS Box-Sizing Modul erweitert, welches den inneren Größenwert einführt und das Definieren von Seitenverhältnissen für Elemente ermöglicht, die in mindestens einer Dimension automatisch angepasst werden.