Einführung in das grundlegende CSS-Boxmodell

Beim Layout eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckige Box gemäß dem Standard-CSS-Basis-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 werden: die Inhaltskante, Polsterkante, Randkante und Innenkante.

CSS-Boxmodell

Inhaltsbereich

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

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

Polsterbereich

Der Polsterbereich, begrenzt durch die Polsterkante, erweitert den Inhaltsbereich, um die Polsterung des Elements einzuschließen. Seine Abmessungen sind die Polsterfeldbreite und die Polsterfeldhöhe.

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

Randbereich

Der Randbereich, begrenzt durch die Randkante, erweitert den Polsterbereich, um die Ränder des Elements einzuschließen. Seine Abmessungen sind die Randfeldbreite und die Randfeldhöhe.

Die Dicke der Ränder wird durch die Eigenschaften border-width und die Kurzschreibweise border bestimmt. Wenn die Eigenschaft box-sizing auf border-box gesetzt ist, kann die Größe des Randbereichs durch die Eigenschaften width, min-width, max-width, height, min-height und max-height explizit definiert werden. Wenn ein Hintergrund (background-color oder background-image) für eine Box festgelegt ist, erstreckt er sich bis zur äußeren Kante des Randes (d.h. er erstreckt sich unter dem Rand in der Z-Schicht). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Innenbereich

Der Innenbereich, begrenzt durch die Innenkante, erweitert den Randbereich, um einen leeren Bereich einzuschließen, der verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Abmessungen sind die Innenfeldbreite und die Innenfeldhöhe.

Die Größe des Innenbereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzschreibweise margin bestimmt. Wenn das Innenkollabieren auftritt, ist der Innenbereich nicht klar definiert, da Innenbereiche zwischen Boxen geteilt werden.

Zum Schluss, beachten Sie, dass bei nicht ersetzten Inline-Elementen der Platzbedarf (der Beitrag zur Höhe der Zeile) durch die Eigenschaft line-height bestimmt wird, obwohl die Ränder und Polsterungen weiterhin um den Inhalt angezeigt werden.

Siehe auch