Einführung in das grundlegende CSS-Boxmodell

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

Jeder Kasten besteht aus vier Teilen (oder Bereichen), die durch ihre jeweiligen Kanten definiert sind: die Inhaltskante, Innenabstandskante (Padding), Rahmenkante und Randkante (Margin).

CSS Boxmodell

Inhaltsbereich

Der Inhaltsbereich, der durch die Inhaltskante begrenzt ist, 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 box-sizing-Eigenschaft auf content-box (Standard) gesetzt ist und das Element ein Block-Element ist, kann die Größe des Inhaltsbereichs explizit mit den width, min-width, max-width, height, min-height und max-height-Eigenschaften definiert werden.

Innenabstandsbereich (Padding)

Der Innenabstandsbereich, der durch die Innenabstandskante begrenzt ist, erweitert den Inhaltsbereich, um den Innenabstand (Padding) des Elements einzuschließen. Seine Abmessungen sind die Padding-Box-Breite und die Padding-Box-Höhe.

Die Stärke des Innenabstands wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left und die Kurzschrift padding bestimmt.

Rahmenbereich

Der Rahmenbereich, der durch die Rahmenkante begrenzt ist, erweitert den Innenabstandsbereich, um die Rahmen des Elements einzuschließen. Seine Abmessungen sind die Rahmen-Box-Breite und die Rahmen-Box-Höhe.

Die Stärke der Rahmen wird durch die border-width-Eigenschaft und die Kurzschrift border bestimmt. Wenn die box-sizing-Eigenschaft auf border-box gesetzt ist, kann die Größe des Rahmenbereichs mit den width, min-width, max-width, height, min-height und max-height-Eigenschaften explizit definiert werden. Wenn ein Hintergrund (background-color oder background-image) auf einen Kasten gesetzt ist, erstreckt er sich bis zur äußeren Kante des Rahmens (d.h. er erstreckt sich im Z-Index unter den Rahmen). Dieses Standardverhalten kann mit der background-clip CSS-Eigenschaft verändert werden.

Randbereich (Margin)

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

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

Beachten Sie schließlich, dass für nicht ersetzte Inline-Elemente die Menge des eingenommenen Raums (der Beitrag zur Höhe der Zeile) durch die line-height-Eigenschaft bestimmt wird, obwohl die Rahmen und Innenabstände immer noch um den Inhalt herum angezeigt werden.

Siehe auch