Einführung in das CSS-Box-Modell
Beim Layout eines Dokuments stellt die Rendering-Engine des Browsers jedes Element gemäß dem standardmäßigen CSS-Box-Modell als rechteckige Box dar. CSS bestimmt die Größe, Position und Eigenschaften dieser Boxen (Farbe, Hintergrund, Rahmenbreite usw.).
Jede Box besteht aus vier Teilen (oder Bereichen), die durch ihre jeweiligen Kanten begrenzt sind: die Inhaltskante, die Innenabstandskante, die Rahmenkante und die Außenabstandskante.
Inhaltsbereich
Der Inhaltsbereich wird von der Inhaltskante begrenzt und enthält den eigentlichen Inhalt des Elements, beispielsweise 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 häufig eine Hintergrundfarbe oder ein Hintergrundbild.
Wenn die Eigenschaft box-sizing auf content-box (Standardwert) gesetzt ist und das Element ein Blockelement ist, kann die Größe des Inhaltsbereichs mit den Eigenschaften width, min-width, max-width, height, min-height und max-height ausdrücklich festgelegt werden.
Innenabstandsbereich
Der Innenabstandsbereich wird von der Innenabstandskante begrenzt und erweitert den Inhaltsbereich um den Innenabstand des Elements. Seine Abmessungen sind die padding-box-Breite und die padding-box-Höhe.
Die Größe des Innenabstands wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left und die Kurzschreibweise padding bestimmt.
Rahmenbereich
Der Rahmenbereich wird von der Rahmenkante begrenzt und erweitert den Innenabstandsbereich um die Rahmen des Elements. Seine Abmessungen sind die border-box-Breite und die border-box-Höhe.
Die Breite der Rahmen wird durch die Eigenschaft border-width und die Kurzschreibweise border bestimmt. Wenn die Eigenschaft box-sizing auf border-box gesetzt ist, kann die Größe des Rahmenbereichs mit den Eigenschaften width, min-width, max-width, height, min-height und max-height ausdrücklich festgelegt werden. Wenn für eine Box ein Hintergrund (background-color oder background-image) festgelegt ist, reicht dieser bis zur Außenkante des Rahmens (liegt in der Z-Reihenfolge also unter dem Rahmen). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.
Außenabstandsbereich
Der Außenabstandsbereich wird von der Außenabstandskante begrenzt und erweitert den Rahmenbereich um einen leeren Bereich, der das Element von benachbarten Elementen trennt. Seine Abmessungen sind die margin-box-Breite und die margin-box-Höhe.
Die Größe des Außenabstandsbereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzschreibweise margin bestimmt. Wenn Außenabstände zusammenfallen, ist der Außenabstandsbereich nicht eindeutig definiert, da sich Boxen die Außenabstände teilen.
Beachten Sie schließlich, dass bei nicht ersetzten Inline-Elementen der Platzbedarf (ihr Beitrag zur Zeilenhöhe) durch die Eigenschaft line-height bestimmt wird, obwohl Rahmen und Innenabstand weiterhin um den Inhalt herum angezeigt werden.
Siehe auch
- Modul CSS-Box-Modell
- Layout und der umschließende Block
- Einführung in die CSS-Kaskade
- CSS lernen: Umgang mit Konflikten
- Grundkonzepte von CSS: