Beim Layouten eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckigen Kasten gemäß dem standardmäßigenCSS-Basis-Boxmodell dar. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Rahmengröße usw.) dieser Kästen.

Jeder Kasten besteht aus vier Teilen (oderBereichen), die durch ihre jeweiligen Kanten definiert sind: dieInnenkante,Polsterungskante,Rahmenkante undRandkante.

Inhaltsbereich

DerInhaltsbereich, begrenzt durch die Innenkante, enthält den "echten" Inhalt des Elements, wie Text, Bild oder einen Videoplayer. Seine Abmessungen sind dieInhaltbreite (oderContent-Box-Breite) und dieInhaltshöhe (oderContent-Box-Höhe). Er hat oft eine Hintergrundfarbe oder ein Hintergrundbild.

Wenn die Eigenschaftbox-sizing aufcontent-box (Standard) gesetzt ist und wenn das Element ein Blockelement ist, kann die Größe des Inhaltsbereichs ausdrücklich mit den Eigenschaftenwidth,min-width,max-width,height,min-height undmax-height definiert werden.

Polsterungsbereich

DerPolsterungsbereich, begrenzt durch die Polsterungskante, erweitert den Inhaltsbereich, um die Polsterung des Elements einzuschließen. Seine Abmessungen sind diePadding-Box-Breite und diePadding-Box-Höhe.

Die Dicke der Polsterung wird durch die Eigenschaftenpadding-top,padding-right,padding-bottom,padding-left und die Kurzformpadding bestimmt.

Rahmenbereich

DerRahmenbereich, begrenzt durch die Rahmenkante, erweitert den Polsterungsbereich, um die Rahmen des Elements einzuschließen. Seine Abmessungen sind dieBorder-Box-Breite und dieBorder-Box-Höhe.

Die Dicke der Rahmen wird durch die Eigenschaftenborder-width und die Kurzformborder bestimmt. Wenn die Eigenschaftbox-sizing aufborder-box gesetzt ist, kann die Größe des Rahmenbereichs ausdrücklich mit den Eigenschaftenwidth,min-width,max-width,height,min-height undmax-height definiert werden. Wenn ein Hintergrund (background-color oderbackground-image) auf einem Kasten gesetzt ist, erstreckt er sich bis zur Außenkante des Rahmens (d.h. er erstreckt sich in der Z-Anordnung unter den Rahmen). Dieses Standardverhalten kann mit der CSS-Eigenschaftbackground-clip geändert werden.

Randbereich

DerRandbereich, 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 dieMargin-Box-Breite und dieMargin-Box-Höhe.

Die Größe des Randbereichs wird durch die Eigenschaftenmargin-top,margin-right,margin-bottom,margin-left und die Kurzformmargin bestimmt. WennRandzusammenfall auftritt, ist der Randbereich nicht klar definiert, da Ränder zwischen Kästen geteilt werden.

Beachten Sie schließlich, dass für nicht ersetzte Inline-Elemente der Platzbedarf (der Beitrag zur Höhe der Zeile) durch die Eigenschaftline-height bestimmt wird, auch wenn die Rahmen und Polsterung weiterhin um den Inhalt angezeigt werden.

Siehe auch

• CSS-Boxmodell Modul
• Layout und der umgebende Block
• Einführung in den CSS-Cascade
• Lernen: Konflikte bearbeiten
• CSS-Schlüsselkonzepte:
  • CSS-Syntax
  • At-Regeln
  • Kommentare
  • Spezifität
  • Vererbung
  • Layout-Modi
  • Visuelles Formatierungsmodell
  • Randzusammenfall
  • Werte:
    • Anfangswerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Syntax der Wertdefinition
  • Kurzform-Eigenschaften
  • Ersetzte Elemente