Das CSS Box-Model

Jedes HTML-Element ist eine Box. Diese Seite zeigt die vier Schichten des Box-Models mit sichtbaren Farben und erklärt Padding, Margin, Border und box-sizing.

1. Die vier Schichten

Jede Box besteht aus vier Schichten. Hier sind sie farblich markiert:

Box-Model Visualisierung
CONTENT — Der eigentliche Inhalt
Margin (lila)
Border (blau)
Padding (gelb)
Content (grün)

2. Padding-Varianten

Padding kann auf verschiedene Weisen angegeben werden. Beachten Sie, wie sich der Abstand zwischen Border (blau) und Inhalt (hellblau) ändert:

padding: 20px; (alle Seiten gleich)
Inhalt
padding: 10px 40px; (oben/unten, links/rechts)
Inhalt
padding-top: 40px; -right: 10px; -bottom: 5px; -left: 30px;
Inhalt
padding: 5px 20px 40px 10px; (Uhrzeigersinn)
Inhalt

3. Margin vs. Padding

Margin erzeugt Abstand zwischen Elementen. Padding erzeugt Abstand innerhalb eines Elements (zwischen Border und Inhalt).

Margin (Außenabstand)

Box A
Box B (margin-top: 20px)
Box C

Der Abstand zwischen den Boxen ist Margin. Er ist transparent.

Padding (Innenabstand)

Box mit viel Padding (2rem)
Noch eine Box mit Padding
Dritte Box

Der Abstand innerhalb der Box (zwischen Text und Rahmen) ist Padding.

4. box-sizing: content-box vs. border-box

Die Eigenschaft box-sizing bestimmt, ob width nur den Content oder Content + Padding + Border umfasst. Beide Boxen unten haben width: 200px, padding: 20px, border: 5px. Die schwarze Linie zeigt 200px an.

box-sizing: content-box (Standard)
width: 200px
200px Referenz
Tatsächliche Breite: 200 + 40 + 10 = 250px
(Content + 2*Padding + 2*Border)
box-sizing: border-box (empfohlen)
width: 200px
200px Referenz
Tatsächliche Breite: 200px
(Padding und Border sind bereits enthalten)

5. display: block, inline, inline-block

Die display-Eigenschaft bestimmt, wie sich eine Box im Layout verhält.

display: block (Standard bei div, p, h1-h6)
Block-Element 1 — nimmt volle Breite ein
Block-Element 2 — beginnt auf neuer Zeile
Block-Element 3 — Width und Height wirken
display: inline (Standard bei span, a, strong)
Inline 1 Inline 2 Inline 3 — diese Elemente bleiben im Textfluss. Width und Height werden ignoriert.
display: inline-block (Kombination)
Inline-Block 1
Inline-Block 2
Inline-Block 3

Bleiben im Textfluss wie inline, aber Width, Height und vertikales Margin/Padding wirken.

6. Margin Collapsing

Wenn zwei vertikale Margins aufeinandertreffen, werden sie nicht addiert. Stattdessen gewinnt der größere Wert. Das ist ein häufiger Stolperstein.

Box A — margin-bottom: 30px;
Abstand hier = 30px (NICHT 50px).
Die Margins kollabieren: max(30px, 20px) = 30px
Box B — margin-top: 20px;

Margin Collapsing betrifft nur vertikale Margins von Block-Elementen. Horizontale Margins und Margins von Flex/Grid-Kindern kollabieren nicht.