Einführung in das CSS-Boxmodell
Bei der Gestaltung eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckigen Kasten dar, gemäß dem Standard CSS-Grundkastenmodell. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Randgröße, etc.) dieser Kästen.
Jeder Kasten besteht aus vier Teilen (oder Bereichen), definiert durch ihre jeweiligen Kanten: die Inhaltskante, Abstandskante, Rahmenkante und Randkante.
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 Content-Box-Breite) und die Inhaltshöhe (oder Content-Box-Höhe). Oft hat er eine Hintergrundfarbe oder ein Hintergrundbild.
Ist die Eigenschaft box-sizing auf content-box (Standard) gesetzt und das Element ein Block-Element, 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 zu enthalten. Seine Abmessungen sind die Abstandsbox-Breite und die Abstandsbox-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 zu umfassen. Seine Abmessungen sind die Rahmenbox-Breite und die Rahmenbox-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 einem Kasten gesetzt ist, erstreckt sich dieser bis zur äußeren Kante des Rahmens (d.h. er erstreckt sich unter dem Rahmen in der Tiefenordnung). 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 verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Abmessungen sind die Randbox-Breite und die Randbox-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 Margin Collapsing auftritt, ist der Randbereich nicht klar definiert, da Ränder zwischen Kästen geteilt werden.
Schließlich ist zu beachten, dass für nicht ersetzte Inline-Elemente der Platzbedarf (der Beitrag zur Höhe der Zeile) durch die Eigenschaft line-height bestimmt wird, obwohl die Rahmen und Abstände noch immer um den Inhalt herum angezeigt werden.
Siehe auch
- Layout und der beinhaltende Block
- Einführung in die CSS-Kaskade
- Lernen: Konflikte bearbeiten
- Wichtige CSS-Konzepte: