Einführung in das grundlegende CSS-Box-Modell

Beim Layout einer Seite stellt die Rendering-Engine des Browsers jedes Element gemäß dem standardisierten CSS-Basis-Box-Modell als rechteckige Box dar. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Randgröße usw.) dieser Boxen.

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

CSS Box-Modell

Inhaltsbereich

Der Inhaltsbereich, der von der Inhaltskante begrenzt wird, enthält den "echten" Inhalt des Elements, wie z.B. Text, ein Bild oder ein Videoplayer. Seine Abmessungen sind die Inhaltsbreite (oder content-box width) und die Inhaltshöhe (oder content-box height). Er hat oft eine Hintergrundfarbe oder ein Hintergrundbild.

Wenn die box-sizing-Eigenschaft auf content-box (Standard) gesetzt ist und 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.

Abstand-Bereich

Der Abstand-Bereich, der von der Abstandskante begrenzt wird, erweitert den Inhaltsbereich, um den Abstand des Elements einzuschließen. Seine Abmessungen sind die Abstandskastenbreite und die Abstandskastenhöhe.

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

Rahmenbereich

Der Rahmenbereich, der von der Rahmenkante begrenzt wird, erweitert den Abstand-Bereich, um die Rahmen des Elements einzuschließen. Seine Abmessungen sind die Rahmenkastenbreite und die Rahmenkastenhöhe.

Die Dicke der Rahmen wird durch die Eigenschaften border-width und die Kurzform 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 einer Box gesetzt ist, erstreckt er sich bis zur äußeren Kante des Rahmens (d.h. er erstreckt sich unter dem Rahmen in der Z-Ordnung). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Außenbereich

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

Die Größe des Außenbereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzform margin bestimmt. Wenn Margin Collapsing auftritt, ist der Außenbereich nicht klar definiert, da Ränder zwischen Boxen geteilt werden.

Beachten Sie abschließend, dass bei nicht ersetzten Inline-Elementen der Raum, der eingenommen wird (der Beitrag zur Höhe der Zeile), durch die line-height-Eigenschaft bestimmt wird, obwohl die Rahmen und Abstände immer noch um den Inhalt angezeigt werden.

Siehe auch