CSS Box-Modell: margin, padding, border

Im Browser ist jedes HTML-Element ein Rechteck – auch wenn es nicht so aussieht. Ein Link, eine Überschrift, ein Bild, ein Div – alle sind technisch Boxen. Das Box-Modell beschreibt aus welchen Schichten so eine Box besteht. Wer das Box-Modell verinnerlicht, hat 80% der CSS-Layout-Probleme schon im Griff.

Jede Box besteht aus vier konzentrischen Schichten: content (der eigentliche Inhalt), padding (Innenabstand), border (Rahmen) und margin (Außenabstand). Diese Begriffe wirst du täglich nutzen.

1) Das Box-Modell live erkunden

Hier kannst du die vier Schichten in Echtzeit verändern. Schiebe die Regler und beobachte wie sich die Box-Größen anpassen. Die Werte werden unten als CSS angezeigt:

2) Margin vs. Padding – wann was?

Anfängern fällt der Unterschied schwer. Hier eine klare Trennung:

• padding ist innen. Es schafft Platz zwischen dem Element-Rand und dem Inhalt. Wenn du auf einer Karte einen Hintergrund hast, wird der bis zum padding-Ende gefärbt. Klick-Bereiche werden mit padding vergrößert.
• margin ist außen. Es schiebt das Element weg von anderen Elementen drumherum. Margin ist immer transparent – nimmt die Hintergrundfarbe des Eltern-Elements an.

Faustregel: brauchst du Abstand zwischen Inhalt und Rand des Elements selbst? → padding. Brauchst du Abstand zu anderen Elementen? → margin. Bei Buttons z.B. gibt padding den Innenabstand zwischen Text und Rand (macht den Button höher), margin den Abstand zu anderen Buttons drum herum.

3) Die Shorthand-Schreibweise

Margin und padding (und border) gibt es jeweils in vier Richtungen: top, right, bottom, left. Du kannst sie einzeln setzen oder kompakt mit der Shorthand-Syntax:

4) Border – Rahmen mit Stilen

Ein Rahmen hat drei Eigenschaften: Breite, Stil, Farbe. Die Shorthand border: 2px solid black kombiniert alle drei. Hier die verfügbaren border-style-Werte:

5) box-sizing: content-box vs. border-box

Eine berüchtigte CSS-Falle: was bedeutet eigentlich width: 300px? Standardmäßig (content-box) ist das die Breite des Inhalts – padding und border kommen obendrauf. Setzt du also padding 20px und border 2px dazu, ist die Box tatsächlich 344px breit! Das verwirrt Anfänger und führt zu Layout-Bugs:

6) Margin Collapsing – die kontraintuitive Eigenheit

Eine seltsame CSS-Eigenheit: wenn zwei vertikale margins direkt aufeinandertreffen, werden sie nicht addiert – sondern der größere von beiden gewinnt. Das heißt Margin Collapsing (Margin-Kollaps).

Beispiel: zwei Absätze, der erste hat margin-bottom: 20px, der zweite margin-top: 30px. Du erwartest 50px Abstand. Tatsächlich sind es nur 30px – Browser nimmt den größeren. Das gilt nur für vertikale margins zwischen Block-Elementen, nicht für horizontale, nicht in Flexbox/Grid.

Workarounds wenn man wirklich Addition will: padding nutzen statt margin, oder zwischen die Elemente eine border setzen, oder einen flex/grid-Container verwenden (L8).

7) display: block, inline, inline-block

Die display-Eigenschaft bestimmt wie sich ein Element grundsätzlich verhält. Die drei wichtigsten Werte:

• block (Default für div, p, h1...): nimmt volle Breite, beginnt auf neuer Zeile, width/height/margin/padding voll wirksam.
• inline (Default für span, a, strong...): nur so breit wie Inhalt, bleibt im Textfluss, width/height haben KEINE Wirkung, vertikale margin/padding wirken eingeschränkt.
• inline-block: wie inline (im Textfluss), aber width/height/margin/padding wirken wie bei block. Sehr nützlich für Buttons in Texten, Tags, Badges.

Mit display: none kannst du ein Element komplett ausblenden (auch der Platz verschwindet). Im Gegensatz zu visibility: hidden – da bleibt der Platz reserviert, aber unsichtbar. Mehr Display-Werte: display: flex (siehe L8) und display: grid (siehe L9) sind die modernen Layout-Werkzeuge.

8) DevTools: Box-Modell debuggen

Wenn ein Layout merkwürdig aussieht, sind die Browser-DevTools dein bester Freund. Öffne sie mit F12 oder Rechtsklick → „Untersuchen". Dort siehst du im „Computed"-Tab eine visuelle Darstellung des Box-Modells mit allen Werten:

┌─── margin (20px) ─────────────┐
│ ┌── border (2px) ──────────┐ │
│ │ ┌── padding (12px) ──┐ │ │
│ │ │ content (240x80) │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────┘ │
└────────────────────────────────┘

Über das Element hovern zeigt im Browserfenster die Box-Dimensionen als Overlay – orange = margin, grün = padding, blau = border. Die Werte lassen sich direkt im Inspektor ändern um schnell zu experimentieren.

9) Praxis-Patterns mit dem Box-Modell

Drei häufige Anwendungen:

Zusammenfassung

Jedes HTML-Element ist eine Box mit vier konzentrischen Schichten: content (Inhalt) → padding (innen, mit BG-Farbe) → border (Rahmen) → margin (außen, transparent). Shorthand: 1 Wert = alle Seiten, 2 = oben/unten + links/rechts, 4 = TRBL im Uhrzeigersinn. border: Breite + Stil (solid am häufigsten) + Farbe. border-radius für Rundungen. box-sizing: border-box ist heute Standard – global setzen mit * { box-sizing: border-box; }. Margin-Collapsing: vertikale margins zwischen Block-Elementen verschmelzen zum größeren. display: block/inline/inline-block für Grundverhalten. DevTools (F12) zeigen Box-Modell visuell.