CSS Box-Modell: margin, padding und border

Jedes Element im Browser ist eine rechteckige Box aus vier Bereichen: dem Inhalt, dem Innenabstand padding, dem Rahmen border und dem Außenabstand margin. Die Angabe width misst im Standardmodell nur den Inhalt. Mit box-sizing: border-box umfasst sie Inhalt, Innenabstand und Rahmen zusammen.

Das Box-Modell ist die Rechenregel, nach der jeder Browser Platz vergibt. Es entscheidet, wie breit ein Element wird, wie viel Luft zwischen zwei Absätzen bleibt und ob eine Schaltfläche groß genug ist, um sie mit dem Finger zu treffen. Jede Layout-Eigenschaft setzt darauf auf: Flexbox verteilt Boxen auf einer Achse, Grid setzt sie in ein Raster, und beide rechnen mit den Maßen, die hier entstehen.

Diese Seite gehört zur CSS-Referenz für zugängliche Websites. Sie zeigt die vier Bereiche im Code, die beiden Rechenmodelle, die Regeln für zusammenfallende Abstände und die Stellen, an denen ein falsch gesetzter Abstand eine Anforderung der WCAG verletzt. Stand September 2026 arbeiten alle aktuellen Browser nach derselben Spezifikation, das CSS Box Model Module Level 3 des W3C.

Das Wichtigste in Kürze

• Eine Box besteht aus vier Bereichen. Von innen nach außen sind das die Content-Box, die Padding-Box, die Border-Box und die Margin-Box.
• width misst im Standardmodell nur den Inhalt. Die sichtbare Breite ergibt sich aus border-left + padding-left + width + padding-right + border-right.
• box-sizing: border-box rechnet Innenabstand und Rahmen in die Angabe ein. Ein Element mit width: 200px belegt dann 200 Pixel, unabhängig von seiner Polsterung.
• padding wirkt innerhalb der Box und wird vom Hintergrund mitgefärbt. margin wirkt nach außen und bleibt immer durchsichtig.
• Senkrechte Außenabstände fallen zusammen. Zwischen zwei Absätzen mit je 2rem bleiben 2rem Abstand stehen und keine 4rem.
• Schaltflächen erreichen die geforderten 24 mal 24 CSS-Pixel aus 2.5.8 Zielgröße über padding. Feste Höhen schneiden bei größerer Schrift den Text ab.

Die vier Bereiche einer Box

Jede Box besteht aus vier ineinander liegenden Rechtecken. Sie haben feste Namen, die in CSS an vielen Stellen wieder auftauchen, etwa als Werte für box-sizing, background-clip und background-origin.

.karte {
  width: 20rem;              /* Content-Box */
  padding: 1.5rem;           /* Innenabstand rundherum */
  border: 2px solid #123;    /* Rahmen */
  margin-block: 2rem;        /* Außenabstand oben und unten */
  background: #f4f4f5;       /* färbt Content-Box und Padding-Box */
}

Der Hintergrund reicht bis zur Border-Box und liegt damit auch unter dem Innenabstand. Der Außenabstand bleibt durchsichtig. Daraus folgt die Faustregel für die häufigste Frage: Soll der Abstand mitgefärbt und mitgeklickt werden, ist es padding. Soll er zwischen zwei Elementen liegen, ist es margin.

Dass padding zur klickbaren Fläche gehört, ist mehr als ein Detail. Es ist der gebräuchlichste Weg, eine Schaltfläche oder einen Link groß genug zu machen.

Breite berechnen: content-box gegen border-box

Im Standardmodell content-box gilt eine Angabe wie width: 200px allein für den Inhalt. Innenabstand und Rahmen kommen außen dazu.

/* Standard: die Box belegt 200 + 2×24 + 2×2 = 252 Pixel */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 24px;
  border: 2px solid;
}

/* Alternative: die Box belegt genau 200 Pixel, für den Inhalt bleiben 148 */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 24px;
  border: 2px solid;
}

Im Alltag ist die zweite Variante die brauchbarere. Sobald Breiten in Prozent oder in fr stehen, wird die Rechnung im Standardmodell unzumutbar: 33.333% + 2rem + 2px lässt sich nicht sauber auf drei Spalten verteilen. Mit border-box passt eine Spalte mit width: 33.333% in jedem Fall in ihre Zeile.

Deshalb steht in fast jedem Stylesheet diese Regel ganz oben:

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

Eine zweite Schreibweise erlaubt es einzelnen Komponenten, das Modell zu wechseln, ohne die Kinder mitzunehmen:

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

Zwei Dinge ändert border-box nicht. Der Außenabstand bleibt immer außen und zählt nie mit. Und min-width, max-width, min-height sowie max-height folgen demselben Modell, was bei einem max-width: 100% mit Innenabstand den Unterschied zwischen passend und überstehend ausmacht.

Die vier Seiten und die Kurzschreibweisen

margin, padding und border-width nehmen ein bis vier Werte. Die Reihenfolge läuft im Uhrzeigersinn ab oben.

.a { padding: 1rem; }                    /* alle vier Seiten */
.b { padding: 1rem 2rem; }               /* oben/unten | links/rechts */
.c { padding: 1rem 2rem 0.5rem; }        /* oben | links/rechts | unten */
.d { padding: 1rem 2rem 0.5rem 0; }      /* oben | rechts | unten | links */

Daneben steht seit einigen Jahren der Satz logischer Eigenschaften. Sie benennen die Seiten nach der Schreibrichtung statt nach dem Bildschirm. block meint die Richtung, in der Zeilen aufeinander folgen, inline die Leserichtung innerhalb einer Zeile.

.klassisch { margin-top: 2rem; margin-bottom: 2rem; margin-left: auto; margin-right: auto; }
.logisch   { margin-block: 2rem; margin-inline: auto; }

Für deutschen Text sehen beide Varianten gleich aus. Der Unterschied zeigt sich, sobald dieselbe Komponente in einer Sprache mit Schreibrichtung von rechts nach links erscheint. Dann wandert padding-inline-start von selbst auf die richtige Seite, während padding-left stehen bleibt. Das Muster margin-inline: auto ist zugleich der kürzeste Weg, ein Element zu zentrieren.

Zusammenfallende Außenabstände

Senkrechte Außenabstände zwischen Block-Elementen addieren sich nicht. Der größere der beiden Werte gewinnt, der kleinere verschwindet. Dieses Verhalten heißt Margin Collapsing und ist die häufigste Erklärung für einen Abstand, der kleiner ausfällt als gedacht.

h2 { margin-bottom: 2rem; }
p  { margin-top: 1rem; }
/* Zwischen Überschrift und Absatz bleiben 2rem, nicht 3rem. */

Drei Fälle gibt es:

1. Zwei Geschwister. Der untere Abstand des ersten und der obere des zweiten Elements fallen zusammen.
2. Elternteil und erstes oder letztes Kind. Der Abstand des Kindes tritt aus dem Elternelement heraus, solange dieses an der Kante weder Rahmen noch Innenabstand hat.
3. Eine leere Box. Oberer und unterer Abstand desselben Elements fallen ineinander.

Der zweite Fall ist der verwirrendste. Eine Karte ohne Innenabstand rutscht scheinbar grundlos nach unten, weil der Abstand ihrer ersten Überschrift sie mitzieht. Vier Mittel unterbinden das Zusammenfallen:

.karte { padding-block-start: 1px; }    /* Innenabstand an der Kante */
.karte { border-block-start: 1px solid transparent; } /* Rahmen an der Kante */
.karte { display: flow-root; }          /* eigener Formatierungskontext, ohne Nebenwirkung */
.liste { display: grid; gap: 1rem; }    /* Flex und Grid kennen kein Collapsing */

Meine Empfehlung für neue Layouts: Abstände zwischen Geschwistern über gap in einem Flex- oder Grid-Container setzen und margin für den Rest sparsam einsetzen. gap fällt nie zusammen, kennt keine Richtung nach außen und verschwindet mit dem letzten Element von selbst. Der alte Griff .karte + .karte { margin-top: 1rem } wird damit überflüssig.

Prozentwerte beziehen sich immer auf die Breite

Ein Detail, das in vielen Beschreibungen fehlt: Prozentwerte bei padding und margin beziehen sich auf die Inline-Größe des umgebenden Blocks, also bei waagerechter Schrift auf dessen Breite. Das gilt auch für die senkrechten Seiten.

.box {
  width: 400px;
  padding-top: 10%;   /* ergibt 40 Pixel, nicht 10 Prozent der Höhe */
}

Daraus entstand der alte Kniff für Seitenverhältnisse, bei dem ein Container mit padding-top: 56.25% ein Video im Format 16 zu 9 offen hielt. Seit aspect-ratio in allen aktuellen Browsern arbeitet, ist dieser Umweg erledigt.

/* Heute: eine Zeile statt einer Hilfskonstruktion */
.video { aspect-ratio: 16 / 9; }

Inline-Elemente halten sich nur halb an das Modell

Bei einem Element mit display: inline, etwa einem <a> oder <span> im Fließtext, wirken width und height nicht. Senkrechte Innenabstände und Rahmen werden zwar gezeichnet, vergrößern die Zeilenhöhe aber nicht. Das Ergebnis sind überlappende Flächen in dicht gesetztem Text.

/* Don't: die Polsterung überlappt die Zeilen darüber und darunter */
a.tag { display: inline; padding: 0.75rem 1rem; background: #eee; }

/* Do: die Zeile wächst mit, die Fläche bleibt klickbar */
a.tag { display: inline-block; padding: 0.75rem 1rem; background: #eee; }

display: inline-block beachtet Maße und Abstände und bleibt im Textfluss. Für Schaltflächen im Fließtext ist das der Standardweg. Eine Zusatzwirkung hat der Wechsel allerdings: Ein Inline-Block rückt am Zeilenende als Ganzes in die nächste Zeile. Ein Inline-Element verteilt seinen Text dagegen über mehrere Zeilen.

Rahmen, Ring und Schatten im Vergleich

Drei Eigenschaften zeichnen eine Linie um ein Element. Nur eine davon kostet Platz, und dieser Unterschied entscheidet, welche an welcher Stelle passt.

.karte {
  border: 1px solid #d4d4d8;   /* zählt zur Border-Box */
  border-radius: 0.5rem;       /* rundet alle vier Ecken */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); /* liegt außerhalb, ohne Platzbedarf */
}

Die Kurzform border fasst border-width, border-style und border-color zusammen. Ohne border-style bleibt der Rahmen unsichtbar, denn der Anfangswert ist none. Wer nur eine Seite braucht, schreibt border-block-end: 1px solid statt border-bottom, damit die Linie in anderen Schreibrichtungen an der passenden Kante sitzt.

Für Zustände, die den Rahmen verändern, zahlt sich der Platzbedarf aus. Ein Eingabefeld, das im Fehlerfall von 1px auf 2px wechselt, verschiebt seine Nachbarn um einen Pixel. Mit box-shadow: 0 0 0 1px als zweitem Ring bleibt das Layout ruhig.

Die Box im Browser prüfen

Die Entwicklerwerkzeuge zeigen das Modell als beschriftete Grafik. In Chrome, Firefox und Safari erreichst du sie mit einem Rechtsklick auf ein Element und „Untersuchen“. Im Reiter „Berechnet“ (Chrome) oder „Layout“ (Firefox) liegt die Box mit allen vier Bereichen und ihren aktuellen Werten in Pixeln.

Für einen schnellen Überblick über eine ganze Seite hilft eine einzelne Regel in der Konsole. Sie zeichnet jede Box nach, ohne das Layout zu verschieben, weil outline keinen Platz belegt.

* { outline: 1px solid rgb(255 0 0 / 0.4); }

Wer dasselbe mit border versucht, verschiebt jedes Element um zwei Pixel und sucht danach Fehler, die es vorher nicht gab.

Barrierefreiheit: worauf es ankommt

Zielgrößen entstehen aus Innenabstand

WCAG 2.5.8 Zielgröße (Minimum) verlangt seit WCAG 2.2 für jedes Bedienelement eine Fläche von mindestens 24 mal 24 CSS-Pixeln. Ausgenommen sind unter anderem Links im Fließtext und Elemente, die genug Abstand zueinander halten. Der verlässliche Weg dorthin führt über den Innenabstand.

/* Don't: 32 Pixel fest, der Text verschwindet bei größerer Schrift */
.icon-button { width: 32px; height: 32px; font-size: 12px; }

/* Do: die Fläche wächst mit dem Inhalt und hält die Untergrenze ein */
.icon-button {
  min-width: 24px;
  min-height: 24px;
  padding: 0.5rem;
  line-height: 1;
}

Für Fingerbedienung liegt die bessere Marke höher. Die Kriterien 2.5.5 auf Stufe AAA und die Plattform-Vorgaben von Apple und Google nennen 44 beziehungsweise 48 Pixel. In Prüfungen sind die kleinen Icon-Schaltflächen im Kopfbereich der häufigste Treffer, weil sie zuerst aus einem Design-Raster mit fester Kantenlänge entstehen.

Feste Höhen schneiden Text ab

Eine Box mit height hält ihre Höhe, auch wenn der Text mehr Platz benötigt. Bei 200 Prozent Textzoom nach 1.4.4 Textgröße ändern und bei den erzwungenen Abständen aus 1.4.12 Textabstände reicht das nicht mehr. Der Rest verschwindet, sobald zusätzlich overflow abschneidet.

/* Don't */ .kachel { height: 180px; overflow: hidden; }
/* Do    */ .kachel { min-height: 180px; }

Dasselbe gilt für Abstände in Pixeln. Ein padding: 8px 16px bleibt stehen, während die Schrift wächst, und die Beschriftung stößt an den Rahmen. Mit padding: 0.5em 1em skaliert die Polsterung mit der Schriftgröße des Elements.

Abstand ersetzt keine Struktur

Eine Gruppe von Feldern, die nur durch einen größeren Außenabstand vom Rest getrennt ist, sieht gegliedert aus. Für Screenreader existiert diese Gliederung nicht, weil CSS die Struktur des Dokuments unverändert lässt. Was zusammengehört, gehört nach 1.3.1 Info und Beziehungen ins Markup, etwa in ein <fieldset> mit <legend> oder in eine Liste. Die Regeln dazu stehen unter semantisches HTML.

Der Fokusring braucht Raum, keinen Platz

outline wird außerhalb der Border-Box gezeichnet und belegt keinen Platz im Layout. Genau deshalb ist es das Mittel für den Fokusring aus 2.4.7 Fokus sichtbar. Ein Rahmen aus border würde jedes Element beim Fokussieren um seine Stärke verschieben.

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px; /* Abstand zur Box, ohne Einfluss auf das Layout */
}

Zwei Stellen machen den Ring trotzdem unsichtbar. Ein Vorfahre mit overflow: hidden schneidet ihn ab. Und ein Nachbarelement, das sich überlappt, legt sich darüber. Stand September 2026 zeichnen alle aktuellen Browser die outline entlang eines gesetzten border-radius, sodass abgerundete Schaltflächen keinen eckigen Ring mehr bekommen.

Häufige Fragen

Was ist das Box-Modell in CSS?

Das Box-Modell beschreibt, aus welchen Bereichen der Browser jede Element-Box zusammensetzt und wie er ihre Maße berechnet. Von innen nach außen sind das der Inhalt, der Innenabstand padding, der Rahmen border und der Außenabstand margin. Jede Angabe zu Breite, Höhe und Abstand wirkt auf einen dieser Bereiche.

Was ist der Unterschied zwischen padding und margin?

padding liegt innerhalb der Box zwischen Inhalt und Rahmen. Der Hintergrund reicht hinein, und die Fläche gehört zum klickbaren Bereich. margin liegt außerhalb und hält Abstand zu anderen Elementen. Der Bereich bleibt durchsichtig und ist nicht anklickbar. Für die Trefferfläche einer Schaltfläche zählt deshalb nur padding.

Wann brauche ich box-sizing: border-box?

Immer dann, wenn eine Breite eingehalten werden muss und das Element zugleich Innenabstand oder Rahmen hat. Typische Fälle sind Spalten in Prozent, Formularfelder mit width: 100% und Karten in einem Raster. Der globale Wechsel über den Universalselektor ist seit Jahren üblich und erspart in jedem Layout eine Reihe von Korrekturrechnungen.

Warum ist der Abstand zwischen zwei Elementen kleiner als eingestellt?

Senkrechte Außenabstände von Block-Elementen fallen zusammen. Von 2rem unten und 1rem oben bleiben 2rem übrig. Das Verhalten endet in Flex- und Grid-Containern und bei einem Element mit display: flow-root. Wer verlässliche Abstände braucht, setzt sie über gap im Container statt über margin an den Kindern.

Wie groß muss eine Schaltfläche mindestens sein?

Nach WCAG 2.5.8 auf Stufe AA misst eine Zielfläche mindestens 24 mal 24 CSS-Pixel, mit Ausnahmen für Links im Fließtext und für Elemente mit ausreichendem Abstand. Auf Stufe AAA fordert 2.5.5 mindestens 44 mal 44 Pixel. Erreicht wird die Fläche über min-width, min-height und padding, damit der Text bei größerer Schrift sichtbar bleibt.

Verwandte Themen

• CSS-Referenz im Überblick ordnet die Eigenschaften für zugängliche Websites ein.
• CSS-Selektoren und Spezifität erklären, welche der widersprechenden Abstandsregeln gewinnt.
• Flexbox und Grid verteilen Boxen und ersetzen mit gap den Außenabstand zwischen Geschwistern.
• overflow beschreibt, was mit Inhalt geschieht, der aus seiner Box läuft.
• Reflow, Zoom und Textabstände enthält das Testrezept für 320 Pixel Breite und 200 Prozent Zoom.

Quellen

• CSS Box Model Module Level 3: Definition der vier Bereiche, Kurzschreibweisen und zusammenfallende Außenabstände (W3C)
• CSS Box Sizing Module Level 3: Wirkung von content-box und border-box (W3C)
• Understanding SC 2.5.8: Target Size (Minimum): Herleitung der 24 CSS-Pixel und die Ausnahmen (W3C WAI)