Einführung in das CSS-Grundlegende Box-Modell

Beim Layouten eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckige Box gemäß dem Standard CSS-Grundlegende Box-Modell 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 Begrenzungen definiert sind: die Inhaltsbegrenzung, Polsterbegrenzung, Randbegrenzung und Abstandsbegrenzung.

CSS Box-Modell

Inhaltsbereich

Der Inhaltsbereich, begrenzt durch die Inhaltsbegrenzung, enthält den "echten" Inhalt des Elements, wie Text, ein Bild oder einen Videoplayer. Seine Abmessungen sind die Inhaltsbreite (oder Content-Box-Breite) und die Inhaltshöhe (oder Content-Box-Höhe). Er hat oft eine Hintergrundfarbe oder ein Hintergrundbild.

Wenn die Eigenschaft box-sizing 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.

Polsterbereich

Der Polsterbereich, begrenzt durch die Polsterbegrenzung, erweitert den Inhaltsbereich, um die Polsterung des Elements einzuschließen. Seine Abmessungen sind die Polster-Box-Breite und die Polster-Box-Höhe.

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

Randbereich

Der Randbereich, begrenzt durch die Randbegrenzung, erweitert den Polsterbereich, um die Ränder des Elements einzuschließen. Seine Abmessungen sind die Rand-Box-Breite und die Rand-Box-Höhe.

Die Dicke der Ränder wird durch die Eigenschaft border-width und die Kurzform border bestimmt. Wenn die Eigenschaft box-sizing auf border-box gesetzt ist, kann die Größe des Randbereichs 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 festgelegt ist, erstreckt er sich bis zur äußeren Kante des Randes (d. h., er erstreckt sich unter den Rand in der Z-Reihenfolge). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Abstandsbereich

Der Abstandsbereich, begrenzt durch die Abstandsbegrenzung, erweitert den Randbereich, um einen leeren Bereich einzuschließen, der verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Abmessungen sind die Abstand-Box-Breite und die Abstand-Box-Höhe.

Die Größe des Abstandsbereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzform margin bestimmt. Wenn das Abstandskollapsen auftritt, ist der Abstandsbereich nicht klar definiert, da Abstände zwischen Boxen geteilt werden.

Abschließend sei angemerkt, dass für nicht ersetzte Inline-Elemente der tatsächlich eingenommene Platz (der Beitrag zur Höhe der Zeile) durch die Eigenschaft line-height bestimmt wird, auch wenn die Ränder und Polsterungen immer noch um den Inhalt herum angezeigt werden.

Siehe auch