Einführung in das CSS-Boxmodell

Beim Layout einer Dokumentation stellt die Rendering-Engine des Browsers jedes Element als rechteckigen Rahmen gemäß dem standardmäßigen CSS-Basis-Boxmodell dar. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Rahmenstärke usw.) dieser Boxen.

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

CSS Boxmodell

Inhaltsbereich

Der Inhaltsbereich, begrenzt durch die Inhaltskante, enthält den "echten" Inhalt des Elements, wie etwa Text, ein Bild oder einen Videoplayer. Seine Abmessungen sind die Inhaltsbreite (oder Content-Box-Breite) und die Inhaltshöhe (oder Content-Box-Höhe). Oftmals hat er 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.

Abstandbereich

Der Abstandbereich, begrenzt durch die Abstandskante, erweitert den Inhaltsbereich, um den Abstand des Elements einzuschließen. Seine Abmessungen sind die Padding-Box-Breite und die Padding-Box-Hö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, begrenzt durch die Rahmenkante, erweitert den Abstandbereich, um die Rahmen des Elements einzuschließen. Seine Abmessungen sind die Border-Box-Breite und die Border-Box-Höhe.

Die Dicke der Rahmen wird durch die Eigenschaften border-width und die Kurzform border bestimmt. Wenn die Eigenschaft box-sizing 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 liegt in der Z-Reihenfolge unter dem Rahmen). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.

Außenbereich

Der Außenbereich, begrenzt durch die Außenkante, erweitert den Rahmenbereich, um eine leere Fläche einzuschließen, die zur Trennung des Elements von seinen Nachbarn verwendet wird. Seine Abmessungen sind die Margin-Box-Breite und die Margin-Box-Hö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 es zu einem Außen-Kollaps kommt, ist der Außenbereich nicht klar definiert, da Außenabstände zwischen Boxen geteilt werden.

Beachten Sie schließlich, dass bei nicht ersetzten Inline-Elementen der Platzbedarf (der Beitrag zur Höhe der Zeile) durch die Eigenschaft line-height bestimmt wird, auch wenn die Rahmen und Abstände weiterhin um den Inhalt angezeigt werden.

Siehe auch