Das Box-Modell

Zuletzt aktualisiert am 10. Februar 2026

Jedes HTML-Element, das der Browser rendert, ist eine rechteckige Box. Egal ob Überschrift, Absatz, Bild oder Button: Alles ist eine Box. Das Box-Modell beschreibt, wie diese Box aufgebaut ist und wie sich Größenangaben, Abstände und Rahmen zueinander verhalten. Wer das Box-Modell versteht, versteht CSS-Layouts.

Die vier Bereiche

Jede Box besteht von innen nach außen aus vier Bereichen:

┌─────────────────────────────────┐
│           Margin                │
│  ┌───────────────────────────┐  │
│  │         Border            │  │
│  │  ┌─────────────────────┐  │  │
│  │  │      Padding        │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    Content    │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

• Content: Der eigentliche Inhalt, also Text, Bilder, verschachtelte Elemente
• Padding: Innenabstand zwischen Content und Border
• Border: Der sichtbare Rahmen um das Element
• Margin: Außenabstand zwischen dem Element und seinen Nachbarn

Content-Bereich

Der Content-Bereich wird durch width und height definiert. Ohne diese Angaben passt sich die Box an ihren Inhalt an.

.box-auto {
  background: #dbeafe;
  padding: 12px;
}

.box-fixed {
  width: 250px;
  height: 80px;
  background: #ede9fe;
  padding: 12px;
}

<div class="box-auto">Breite passt sich dem Inhalt an (Block-Element: volle Breite).</div>
<div class="box-fixed">Feste Breite: 250px, feste Höhe: 80px.</div>

Block-Elemente (wie <div>) nehmen standardmäßig die volle verfügbare Breite ein. Eine feste width begrenzt das. height solltest du in den meisten Fällen weglassen und dem Inhalt überlassen, weil feste Höhen bei unterschiedlich langen Texten schnell zu Problemen führen.

Padding

Padding ist der Innenabstand zwischen dem Inhalt und dem Rahmen. Er drückt den Inhalt von den Rändern der Box weg.

.no-padding {
  background: #dbeafe;
  border: 2px solid #1a56db;
}

.with-padding {
  background: #dbeafe;
  border: 2px solid #1a56db;
  padding: 20px;
}

<div class="no-padding">Ohne Padding: Text klebt am Rand.</div>
<div class="with-padding">Mit Padding: Text hat Luft zum Atmen.</div>

Shorthand-Notation

Du kannst Padding für jede Seite einzeln oder zusammengefasst schreiben:

/* 1 Wert: alle Seiten gleich */
padding: 20px;

/* 2 Werte: oben/unten | links/rechts */
padding: 10px 30px;

/* 3 Werte: oben | links/rechts | unten */
padding: 10px 30px 20px;

/* 4 Werte: oben | rechts | unten | links (Uhrzeigersinn) */
padding: 5px 15px 25px 40px;

<div class="box1">padding: 20px (alle Seiten gleich)</div>
<div class="box2">padding: 10px 30px (oben/unten 10, links/rechts 30)</div>
<div class="box3">padding: 5px 15px 25px 40px (oben, rechts, unten, links)</div>

Die Reihenfolge bei vier Werten ist im Uhrzeigersinn: oben, rechts, unten, links (OBEN-Rechts-Unten-Links, merke: “TRouBLe” auf Englisch: Top, Right, Bottom, Left).

Border

Der Border ist der sichtbare Rahmen um die Box. Er liegt zwischen Padding und Margin.

.solid {
  border: 3px solid #1a56db;
}

.dashed {
  border: 2px dashed #dc2626;
}

.mixed {
  border-top: 4px solid #059669;
  border-bottom: 1px solid #d1d5db;
  border-left: none;
  border-right: none;
}

<div class="solid">border: 3px solid #1a56db</div>
<div class="dashed">border: 2px dashed #dc2626</div>
<div class="mixed">Verschiedene Seiten, verschiedene Styles</div>

Die Border-Shorthand-Eigenschaft fasst drei Werte zusammen: border: Breite Style Farbe. Die gängigsten Border-Styles sind solid, dashed, dotted und none.

Margin

Margin ist der Außenabstand zwischen der Box und ihren Nachbarn. Im Gegensatz zu Padding ist Margin immer transparent.

.box {
  background: #dbeafe;
  border: 2px solid #1a56db;
  padding: 16px;
  margin: 20px;
}

<div class="box">Box 1 mit margin: 20px</div>
<div class="box">Box 2 mit margin: 20px</div>

Margin verwendet dieselbe Shorthand-Notation wie Padding (1 bis 4 Werte, im Uhrzeigersinn).

Margin Collapsing

Ein Verhalten, das Anfänger oft überrascht: Vertikale Margins von benachbarten Elementen kollabieren. Das heißt, sie werden nicht addiert, sondern der größere Wert gewinnt.

.top {
  margin-bottom: 30px;
}

.bottom {
  margin-top: 20px;
}

/* Ergebnis: 30px Abstand (nicht 50px) */
/* Der größere Margin gewinnt */

<div class="top">margin-bottom: 30px</div>
<div class="bottom">margin-top: 20px</div>
<p style="font-family:system-ui,sans-serif;font-size:13px;color:#6b7280;margin-top:12px;">Der Abstand zwischen den Boxen ist 30px, nicht 50px.</p>

30px margin-bottom und 20px margin-top ergeben nicht 50px Abstand, sondern 30px. Der größere Wert “schluckt” den kleineren. Dieses Verhalten gilt nur für vertikale Margins (oben/unten) und nur bei normalen Block-Elementen im Flow.

Margin Collapsing passiert nicht:

• Bei Elementen mit display: flex oder display: grid
• Bei Elementen mit overflow: hidden (oder anderem Overflow-Wert als visible)
• Bei Elementen mit Border oder Padding zwischen den Margins
• Bei horizontalen Margins (links/rechts)

Negative Margins

Im Gegensatz zu Padding erlaubt Margin negative Werte. Damit ziehst du ein Element in Richtung seiner Nachbarn.

.normal {
  background: #dbeafe;
  padding: 12px;
  border: 2px solid #1a56db;
}

.negative {
  background: #fecaca;
  padding: 12px;
  border: 2px solid #dc2626;
  margin-top: -20px;
}

<div class="container">
<div class="normal">Normale Box</div>
<div class="negative">Negativer Margin: margin-top: -20px</div>
</div>

Negative Margins sind ein legitimes Werkzeug, aber setze sie bewusst ein. Sie können Layouts schwerer nachvollziehbar machen.

box-sizing

Jetzt kommt der Punkt, an dem viele Anfänger stolpern. Standardmäßig verwendet der Browser box-sizing: content-box. Das bedeutet: width und height beziehen sich nur auf den Content-Bereich. Padding und Border kommen obendrauf.

/* Standard: content-box */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #dc2626;
  /* Tatsächliche Breite: 200 + 40 + 10 = 250px */
}

/* Empfohlen: border-box */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #059669;
  /* Tatsächliche Breite: 200px (alles inklusive) */
}

<div class="content-box">content-box: width 200px + 40px Padding + 10px Border = <strong>250px total</strong></div>
<div class="border-box">border-box: width 200px total, <strong>inklusive</strong> Padding und Border</div>

Bei content-box sagst du “200px breit”, aber die Box wird tatsächlich 250px breit (200 + 2×20 Padding + 2×5 Border). Das ist kontraintuitiv und führt ständig zu Problemen, besonders bei prozentualen Breiten.

Bei border-box sagst du “200px breit”, und die Box ist 200px breit. Padding und Border werden nach innen gerechnet, nicht nach außen.

border-box als globaler Standard

Deshalb setzen fast alle modernen Projekte border-box als globalen Standard:

*,
*::before,
*::after {
  box-sizing: border-box;
}

<div class="demo">100% Breite mit Padding und Border, ohne dass die Box überläuft.</div>

Diese drei Zeilen gehören an den Anfang jedes Stylesheets. Sie stellen sicher, dass width: 100% wirklich 100% bedeutet und nicht 100% plus Padding plus Border.

Häufige Fehler

• width: 100% plus Padding ohne border-box: Die Box wird breiter als ihr Container und erzeugt einen horizontalen Scrollbalken. Lösung: box-sizing: border-box setzen.
• Margin Collapsing nicht einkalkulieren: Wenn zwei Elemente 20px margin-bottom und 20px margin-top haben, ist der Abstand 20px, nicht 40px. Plane das in dein Layout ein.
• height für Text-Container festlegen: Feste Höhen führen dazu, dass Text überläuft, wenn er länger wird als erwartet. Lass den Browser die Höhe berechnen.
• Padding und Margin verwechseln: Padding ist Innenabstand (verschiebt den Inhalt weg vom Rand), Margin ist Außenabstand (verschiebt die Box weg von anderen Boxen). Die Hintergrundfarbe füllt den Padding-Bereich, aber nicht den Margin.
• Negative Padding versuchen: Im Gegensatz zu Margin erlaubt CSS keine negativen Padding-Werte. padding: -10px ist ungültig und wird ignoriert.

Zusammenfassung

Du weißt jetzt, wie jede Box im Browser aufgebaut ist und wie du Abstände, Rahmen und Größen kontrollierst. Im nächsten Artikel geht es um Einheiten und Werte: Pixel, Prozent, rem, em und wann du welche Einheit verwenden solltest.