Einführung in das grundlegende CSS-Box-Modell

Beim Layouten eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckige Box gemäß dem standardmäßigen CSS-Box-Modell 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 Content-Kante, Padding-Kante, Border-Kante und Margin-Kante.

CSS Box model

Content-Bereich

Der Content-Bereich, begrenzt durch die Content-Kante, enthält den „echten“ Inhalt des Elements, wie Text, ein Bild oder einen Video-Player. Seine Dimensionen sind die Content-Breite (oder content-box width) und die Content-Höhe (oder content-box height). Er hat oft 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 Content-Bereichs explizit durch die Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden.

Padding-Bereich

Der Padding-Bereich, begrenzt durch die Padding-Kante, erweitert den Content-Bereich, um das Padding des Elements zu enthalten. Seine Dimensionen sind die padding-box width und die padding-box height.

Die Dicke des Paddings wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left und die Kurzschrift padding bestimmt.

Border-Bereich

Der Border-Bereich, begrenzt durch die Border-Kante, erweitert den Padding-Bereich, um die Ränder des Elements einzubeziehen. Seine Dimensionen sind die border-box width und die border-box height.

Die Dicke der Ränder wird durch die Eigenschaften border-width und die Kurzschrift border bestimmt. Wenn die box-sizing Eigenschaft auf border-box gesetzt ist, kann die Größe des Border-Bereichs explizit durch die Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden. Wenn ein Hintergrund (background-color oder background-image) auf einer Box gesetzt ist, erstreckt er sich bis zur äußeren Kante des Rahmens (d.h. er erstreckt sich in der Z-Ordnung unter den Rahmen). Dieses Standardverhalten kann mit der background-clip CSS-Eigenschaft geändert werden.

Margin-Bereich

Der Margin-Bereich, begrenzt durch die Margin-Kante, erweitert den Border-Bereich, um einen leeren Bereich zu enthalten, der verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Dimensionen sind die margin box width und die margin box height.

Die Größe des Margin-Bereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzschrift margin bestimmt. Wenn Margin-Kollaps auftritt, ist der Margin-Bereich nicht klar definiert, da Margen zwischen Boxen geteilt werden.

Beachten Sie schließlich, dass bei nicht ersetzten Inline-Elementen die Menge des benötigten Platzes (der Beitrag zur Höhe der Zeile) durch die line-height Eigenschaft bestimmt wird, obwohl die Ränder und das Padding weiterhin um den Inhalt angezeigt werden.

Siehe auch