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.
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
- Layout und der enthaltene Block
- Einführung in den CSS-Cascade
- Lernen: Umgang mit Konflikten
- Wichtige CSS-Konzepte: