Einführung in das grundlegende CSS-Boxmodell

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

Jedes Kästchen besteht aus vier Teilen (oder Bereichen), die durch ihre entsprechenden Ränder definiert sind: der Inhaltsrand, Abstandsränder, Rahmenrand und der Aussenrand.

CSS Boxmodell

Inhaltsbereich

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

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

Abstandbereich

Der Abstandbereich, begrenzt durch den Abstandsränder, erweitert den Inhaltsbereich, um die Abstände des Elements einzubeziehen. Seine Dimensionen sind die Abstand-box Breite und die Abstand-box Höhe.

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

Rahmenbereich

Der Rahmenbereich, begrenzt durch den Rahmenrand, erweitert den Abstandbereich, um die Rahmen des Elements einzubeziehen. Seine Dimensionen sind die Rahmen-box Breite und die Rahmen-box Höhe.

Die Dicke der Rahmen wird durch die Eigenschaften border-width und die Kurznotation border bestimmt. Wenn die box-sizing Eigenschaft auf border-box gesetzt ist, kann die Größe des Rahmenbereichs explizit mit den Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden. Wenn ein Hintergrund (background-color oder background-image) auf ein Kästchen gesetzt ist, erstreckt er sich bis zum äußeren Rand des Rahmens (d.h. er erstreckt sich unter den Rahmen in der Z-Reihenfolge). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Randbereich

Der Randbereich, begrenzt durch den Aussenrand, erweitert den Rahmenbereich, um einen leeren Bereich einzubeziehen, der verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Dimensionen sind die Rand-box Breite und die Rand-box Höhe.

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

Abschließend sei angemerkt, dass bei nicht ersetzten Inline-Elementen der Platzbedarf (der Beitrag zur Höhe der Zeile) von der Eigenschaft line-height bestimmt wird, auch wenn die Rahmen und Abstände weiterhin um den Inhalt herum angezeigt werden.

Siehe auch