CSS-Werkstatt
Box-Modell · Referenzdiagramm
← Übersicht
Modul 05b

Das CSS-Boxmodell

Jedes HTML-Element ist eine rechteckige Box, die aus vier Schichten besteht.

margin
border
padding
content 200 × 100

Content

Der eigentliche Inhalt: Text, Bilder usw. Größe wird mit width und height festgelegt.

Padding

Innenabstand zwischen Inhalt und Rahmen. Gehört farblich noch zum Element.

Border

Der Rahmen der Box, liegt außerhalb des Paddings.

Margin

Außenabstand zu benachbarten Elementen. Ist unsichtbar/transparent.