Das Box-Modell

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

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 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).

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 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.

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.

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.