CSS box model

Das CSS box model-Modul definiert die height, width, margin und padding Eigenschaften, die zusammen mit den Rahmeneigenschaften das CSS box model bilden.

Jedes sichtbare Element auf einer Webseite ist eine Box, die entsprechend dem visuellen Formatierungsmodell angeordnet ist. CSS-Eigenschaften definieren deren Größe, Position und Stapelebene, 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 Abstand auf einer oder mehreren Seiten umgeben sein. Das Polster umgibt den Inhalt, der Rahmen umgibt das Polster, und der Margin befindet sich außerhalb des Rahmens. Das Boxmodell beschreibt, wie diese Merkmale – der Inhalt, das Polster, der Rahmen und der Abstand – zusammenarbeiten, um eine Box zu erstellen, wie sie durch CSS angezeigt wird.

Das CSS-Boxmodell-Modul definiert physische (oder "seitenbezogene") Eigenschaften wie width und margin-top. Flussbezogene Eigenschaften wie inline-size und margin-block-start (die sich auf die Textrichtung beziehen) sind in logische Eigenschaften und Werte definiert. Das Boxmodell-Modul wird durch das CSS box sizing Modul erweitert, das den intrinsischen Größenwert einführt und das Definieren von Seitenverhältnissen für Elemente ermöglicht, die in mindestens einer Dimension automaßgeschneidert sind.