Einführung in das grundlegende CSS-Boxmodell
Beim Layouten eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckiges Kästchen gemäß dem standardmäßigen CSS-Basis-Boxmodell dar. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Rahmengröße usw.) dieser Kästchen.
Jedes Kästchen besteht aus vier Teilen (oder Bereichen), die durch ihre entsprechenden Ränder definiert sind: der Inhaltsrand, Abstandsränder, Rahmenrand und der Aussenrand.
Inhaltsbereich
Der Inhaltsbereich, begrenzt durch den Inhaltsrand, enthält den "echten" Inhalt des Elements, wie Text, ein Bild oder einen Videoplayer. Seine Dimensionen sind die Inhaltsbreite (oder content-box Breite) und die Inhaltshöhe (oder content-box Höhe). Häufig hat er eine Hintergrundfarbe oder ein Hintergrundbild.
Wenn die box-sizing
Eigenschaft auf content-box
(Standard) gesetzt ist und wenn 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 den Abstandsränder, erweitert den Inhaltsbereich, um die Abstände des Elements einzubeziehen. Seine Dimensionen sind die Abstand-box Breite und die Abstand-box Höhe.
Die Dicke des Abstands wird durch die Eigenschaften padding-top
, padding-right
, padding-bottom
, padding-left
und die Kurznotation padding
bestimmt.
Rahmenbereich
Der Rahmenbereich, begrenzt durch den Rahmenrand, erweitert den Abstandbereich, um die Rahmen des Elements einzubeziehen. 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 Kurznotation 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 ein Hintergrund (background-color
oder background-image
) auf ein Kästchen gesetzt ist, erstreckt er sich bis zum äußeren Rand des Rahmens (d.h. er erstreckt sich unter den Rahmen in der Z-Reihenfolge). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip
geändert werden.
Randbereich
Der Randbereich, begrenzt durch den Aussenrand, erweitert den Rahmenbereich, um einen leeren Bereich einzubeziehen, der verwendet wird, um das Element von seinen Nachbarn zu trennen. 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 Kurznotation margin
bestimmt. Wenn Randüberlagerung auftritt, ist der Randbereich nicht klar definiert, da Ränder zwischen Kästchen geteilt werden.
Abschließend sei angemerkt, dass bei nicht ersetzten Inline-Elementen der Platzbedarf (der Beitrag zur Höhe der Zeile) von der Eigenschaft line-height
bestimmt wird, auch wenn die Rahmen und Abstände weiterhin um den Inhalt herum angezeigt werden.
Siehe auch
- Layout und das enthaltende Block
- Einführung in den CSS-Cascade
- Leitfaden: Umgang mit Konflikten
- Wichtigste CSS-Konzepte: