margin vs padding: der Unterschied zwischen Außen- und Innenabstand

Wo der Abstand liegt

padding liegt innerhalb des Rahmens und trägt den Hintergrund der Box: Eine Hintergrundfarbe füllt den Innenabstand mit aus. margin liegt außerhalb des Rahmens und ist immer transparent; dort scheint der Hintergrund des Elternelements durch. Im Box-Modell in Schichten sind es die zweite und die vierte Schicht.

Negative Werte und Zusammenfallen

margin erlaubt negative Werte und zieht ein Element damit über seine Nachbarn; padding nicht. Vertikale Außenabstände benachbarter Blöcke fallen im normalen Fluss zusammen – zwei mal 24 Pixel ergeben 24, nicht 48. Innenabstände fallen nie zusammen. Wer zwischen zwei Boxen einen sicheren Abstand will, der nicht verrechnet wird, nimmt padding am Container oder gap in Flexbox und Grid.

Klickfläche und Größe

Der Innenabstand gehört zur Box: Ein Link mit padding ist auf der ganzen gepolsterten Fläche anklickbar, sein Rahmen und Hintergrund wachsen mit. Ein Außenabstand vergrößert nur den Platzbedarf im Fluss, nicht die Box. Im Box-Modell von CSS 2.1 addiert sich padding zur width; margin nie.

Prozentwerte: beide messen an der Breite

Ein Prozentwert bezieht sich bei margin wie bei padding auf die Breite des enthaltenden Blocks – auch bei margin-top und padding-bottom. Das überrascht regelmäßig: padding-top: 50% erzeugt keinen halb so hohen Abstand wie das Elternelement, sondern einen halb so breiten. Genau darauf beruht der verbreitete Kniff, mit einem prozentualen Innenabstand ein festes Seitenverhältnis zu erzwingen. Ein weiterer Unterschied: negative Prozentwerte sind beim Innenabstand ebenso verboten wie negative Längen.

Was im berechneten Wert steht

Wer wissen will, welcher Abstand am Ende gilt, liest nicht die Regel, sondern den berechneten Wert. Die Kurzform margin: 24px auto löst der Browser sofort in vier Längsformen auf; abgefragt werden kann nur margin-top, margin-right, margin-bottom und margin-left. Beim Innenabstand steht dort immer eine Länge in Pixeln, auch wenn im Stylesheet ein Prozentwert notiert war – der Bezug auf die Breite des enthaltenden Blocks ist zu diesem Zeitpunkt bereits aufgelöst.

Beim Außenabstand kann dagegen das Schlüsselwort auto stehenbleiben, solange die Breite der Box noch nicht feststeht. Erst wenn sie feststeht, verteilt der Browser den Rest des Platzes auf die Seiten, für die auto notiert ist. Zwei zusammengefallene Außenabstände zeigt der berechnete Wert übrigens beide unverändert an: Das Zusammenfallen geschieht beim Anordnen der Boxen, nicht beim Berechnen der Eigenschaft. Wer im Prüfwerkzeug zweimal 24 Pixel sieht und im Bild nur einen Abstand misst, hat keinen Fehler vor sich, sondern genau dieses Verhalten.

Der Sonderfall margin: auto

margin kennt einen Wert, den padding nicht hat: auto. Bei einem Block mit fester Breite im normalen Fluss teilt margin-left: auto; margin-right: auto den übrigen waagerechten Platz gleichmäßig auf beide Seiten auf – das ist die klassische Art, eine Box zu zentrieren, und sie stammt schon aus CSS 1. Ohne Breitenangabe passiert nichts, weil dann kein Rest übrig bleibt, den es zu verteilen gäbe.

Senkrecht wirkt auto im normalen Fluss dagegen wie 0. Eine Box lässt sich damit also nicht in der Höhe zentrieren; das war einer der langlebigsten Stolpersteine von CSS 2.1 und einer der Gründe, warum Flexbox und Grid entstanden sind. Innerhalb eines Flex- oder Grid-Containers verteilt auto den Platz auf beiden Achsen, und dort zentriert margin: auto tatsächlich in beide Richtungen. Ein Innenabstand kann nichts davon: Er ist stets eine feste Angabe und verteilt keinen übrigen Platz.

Wo Prozentwerte an nichts messen können

Ein Prozentwert misst am enthaltenden Block – und der hat nicht immer eine bestimmte Breite. Bei einem absolut positionierten Element ohne Breitenangabe, bei einem umflossenen Element und bei einer Tabellenzelle mit automatischer Breite hängt die Breite vom Inhalt ab, und der Inhalt hängt über den Innenabstand wieder von der Breite ab. CSS 2.1 löst diese Rückbezüglichkeit nicht auf, sondern überlässt das Ergebnis ausdrücklich dem Browser.

Für die Praxis heißt das: In diesen Fällen gehören feste Längen hin, keine Prozentwerte. Dieselbe Vorsicht gilt bei einer Höhe in Prozent, die ein Elternelement mit fester Höhe voraussetzt – fehlt sie, wird die Angabe zu auto, und die Box bleibt so hoch wie ihr Inhalt. Abstände in Prozent sind davon nicht betroffen, weil sie ohnehin an der Breite messen; sie sind eine der wenigen Angaben, die auch dann funktionieren, wenn die Höhe unbekannt ist.

Wann welches

• Abstand zwischen Text und Rahmen oder Hintergrund: padding.
• Abstand zwischen zwei Elementen: margin – oder gap im Container.
• Größere Klickfläche für Links und Schaltflächen: padding.
• Ein Element über ein anderes ziehen: negativer margin.
• Zentrieren eines Blocks: margin: auto; padding kann das nicht.

Häufige Fragen