Einführung in das CSS-Boxmodell

Beim Layouten eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckige Box gemäß dem standardmäßigen CSS-Basis-Boxmodell dar. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Rahmengröße usw.) dieser Boxen.

Jede Box besteht aus vier Teilen (oder Bereichen), die durch ihre jeweiligen Kanten definiert sind: der Inhaltskante, Polsterkante, Rahmenkante und Außenkante.

CSS Boxmodell

Inhaltsbereich

Der Inhaltsbereich, begrenzt durch die Inhaltecke, enthält den "echten" Inhalt des Elements, wie etwa Text, ein Bild oder einen Videoplayer. Seine Abmessungen sind die Inhaltsbreite (oder content-box width) und die Inhaltshöhe (oder content-box height). Häufig hat er eine Hintergrundfarbe oder ein Hintergrundbild.

Wenn die Eigenschaft box-sizing auf content-box gesetzt ist (Standard) und wenn das Element ein Blockelement ist, kann die Größe des Inhaltsbereiches ausdrücklich mit den Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden.

Polsterbereich

Der Polsterbereich, begrenzt durch die Polsterkante, erweitert den Inhaltsbereich, um das Polster des Elements einzuschließen. Seine Abmessungen sind die Polsterboxbreite und die Polsterboxhöhe.

Die Dicke des Polsters wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left und die Kurzschrift padding bestimmt.

Rahmenbereich

Der Rahmenbereich, begrenzt durch die Rahmenkante, erweitert den Polsterbereich, um die Rahmen des Elements einzuschließen. Seine Abmessungen sind die Rahmenboxbreite und die Rahmenboxhöhe.

Die Dicke der Rahmen wird durch die Eigenschaften border-width und die Kurzschrift border bestimmt. Wenn die Eigenschaft box-sizing auf border-box gesetzt ist, kann die Größe des Rahmenbereichs ausdrücklich mit den Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden. Wenn sich ein Hintergrund (background-color oder background-image) auf einer Box befindet, erstreckt er sich bis zur äußeren Kante des Rahmens (d.h. er erstreckt sich unterhalb des Rahmens in der z-Ordnung). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Randbereich

Der Randbereich, begrenzt durch die Außenkante, erweitert den Rahmenbereich, um einen leeren Bereich einzuschließen, der verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Abmessungen sind die Randboxbreite und die Randboxhöhe.

Die Größe des Randbereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzschrift margin bestimmt. Wenn Margenüberlappung auftritt, ist der Randbereich nicht klar definiert, da die Ränder zwischen Boxen geteilt werden.

Schließlich ist zu beachten, dass für nicht ersetzte Inline-Elemente der genutzte Raum (der Beitrag zur Höhe der Zeile) durch die Eigenschaft line-height bestimmt wird, auch wenn die Ränder und Polster noch um den Inhalt herum angezeigt werden.

Siehe auch