Einführung in das grundlegende CSS-Boxmodell

Beim Layouten eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckige Box gemäß dem standardmäßigen CSS-Boxmodell 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: die Inhaltskante, Polsterkante, Rahmenkante und Randkante.

CSS Box model

Inhaltsbereich

Der Inhaltsbereich, begrenzt durch die Inhaltskante, enthält den "echten" Inhalt des Elements, wie Text, ein Bild oder einen Video-Player. Seine Dimensionen sind die Inhaltsbreite (oder Content-Box-Breite) und die Inhaltshöhe (oder Content-Box-Höhe). Oft hat er eine Hintergrundfarbe oder ein Hintergrundbild.

Wenn die box-sizing-Eigenschaft auf content-box (Standard) gesetzt ist und wenn das Element ein Block-Element ist, kann die Größe des Inhaltsbereichs explizit 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 Dimensionen sind die Polster-Box-Breite und die Polster-Box-Höhe.

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

Rahmenbereich

Der Rahmenbereich, begrenzt durch die Rahmenkante, erweitert den Polsterbereich, um die Rahmen des Elements einzuschließen. 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 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 auf einer Box ein Hintergrund (background-color oder background-image) festgelegt ist, erstreckt sich dieser bis zur äußeren Kante des Rahmens (d. h. er erstreckt sich in der Z-Reihenfolge unter dem Rahmen). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Randbereich

Der Randbereich, begrenzt durch die Randkante, erweitert den Rahmenbereich, um einen leeren Bereich einzuschließen, der zur Trennung des Elements von seinen Nachbarn verwendet wird. 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 Kurzform margin bestimmt. Wenn Randüberlappung auftritt, ist der Randbereich nicht klar definiert, da Ränder zwischen Boxen geteilt werden.

Beachten Sie abschließend, dass für nicht ersetzte Inline-Elemente die Menge an Platz, die eingenommen wird (der Beitrag zur Höhe der Zeile), durch die Eigenschaft line-height bestimmt wird, auch wenn die Rahmen und Polster weiterhin um den Inhalt herum angezeigt werden.

Siehe auch