Margin vs. Padding: Systemregeln

Ein Entwickler stapelt eine Karte über eine Überschrift. Die Karte hat margin-bottom: 24px, die Überschrift margin-top: 16px, der Abstand sollte also 40px betragen. Der Browser rendert 24. Kein Fehler, keine Warnung — die 16px-Margin ist einfach verschwunden, geschluckt von einem CSS-Verhalten namens Margin Collapsing, dem die meisten genau so begegnen: als rätselhafter Abstand, der zur Rechnung keines der beiden Elemente passt.

Padding ist der Raum innerhalb des Rahmens eines Elements; Margin ist der Raum außerhalb davon. Die Regel, die ein Design-System kombinierbar hält, geht noch einen Schritt weiter: Padding gehört zur Komponente — es ist Teil dessen, was die Komponente ist —, während Margin zum Layout gehört — eine Aussage darüber, wo die Komponente gerade platziert ist. Ein Button besitzt sein Padding genauso wie seinen border-radius; er sollte keine Meinung über seinen Abstand zu den Nachbarn haben.

Dieser Artikel behandelt die Box-Model-Definition, die Besitz-Regel, die wichtiger ist als die Definition, das Collapsing-Verhalten hinter den verschwundenen 16px und das dem Elternelement gehörende gap-Muster, das Collapsing komplett umgeht — wobei jeder Abstand aus derselben Abstände-Skala stammt.

Was ist der Unterschied zwischen Margin und Padding in CSS?

Im CSS Box Model ist jedes Element eine Reihe ineinander verschachtelter Rechtecke: Inhalt, dann Padding, dann Rahmen (border), dann Margin. Padding sitzt innerhalb des Rahmens, nimmt also die Hintergrundfarbe des Elements an, erweitert seine klickbare Fläche und zählt — mit box-sizing: border-box — zur deklarierten Breite des Elements. Margin sitzt außerhalb des Rahmens: immer transparent, nie klickbar und in vertikalen Stapeln in der Lage, mit benachbarten Margins zu verschmelzen.

Eine knappe Merkregel für den Unterschied: Padding verändert, wie das Element aussieht; Margin verändert, wie es sich zu allem um es herum verhält. Diese Asymmetrie ist der Grund, warum die beiden unterschiedliche Besitzer verdienen.

Wann solltest du Margin verwenden und wann Padding?

Nimm einen Button. Sein Padding — sagen wir 11px vertikal, 16px horizontal — ist Teil seiner Identität: Es sorgt dafür, dass sich der Button in einer Toolbar, einem Formular und einem Dialog wie derselbe Button anfühlt. Sein Abstand zum nächsten Element ist nicht Teil seiner Identität. In einer dichten Toolbar sind vielleicht 8px der richtige Abstand; zwischen Formularfeldern 16px; unter einem Hero-Absatz 32px. Wenn der Button mit margin-right: 16px ausgeliefert wird, ist er an einer dieser Stellen richtig und an den anderen falsch — und an jeder falschen Stelle wächst ein Override heran. Multipliziere das mit fünfzig Komponenten, und das Stylesheet wird zu einem Streit zwischen Komponenten über Raum, den keine von ihnen besitzen sollte.

Daher die Systemregel: Komponenten definieren ihr Padding und niemals ihre äußeren Margins; Container definieren die Abstände zwischen ihren Kindern. Jede Komponente lässt sich dann ohne Verhandlung in jedes Layout fallen lassen — und das ist der größte Teil dessen, was „kombinierbar” für Abstände bedeutet.

Sieh dir die beiden Rollen auf einer Skala in Scale Composer an — die kleinen Schritte (8, 11, 16) erledigen die Innenarbeit als Komponenten-Padding, während die größeren Schritte (16, 23, 32, 45) die Außenarbeit als Layout-Abstände erledigen, alle erzeugt aus einer Basis und einem Verhältnis.

Warum fallen vertikale Margins zusammen?

Wenn zwei Block-Elemente im normalen Dokumentfluss übereinanderstehen, addieren sich ihre benachbarten vertikalen Margins nicht — sie verschmelzen zu einer einzigen Margin, die dem größeren der beiden Werte entspricht:

Das Verhalten ist Absicht. CSS wurde für Dokumente entworfen, in denen Absätze oben und unten Margin tragen; würden sich diese Margins addieren, hätte jedes Absatzpaar doppelten Zeilenabstand. Das Zusammenfallen auf den größeren Wert gibt Fließtext gratis einen gleichmäßigen Rhythmus. Im Anwendungslayout liest sich dasselbe Verhalten wie ein Bug: Zwei explizite Werte ergeben einen dritten Wert, der in keinem Stylesheet auftaucht. Es hat auch weniger bekannte Varianten — die obere Margin eines Kindelements kann durch die Kante seines Elternelements hindurch zusammenfallen und den gesamten Container des Elternelements nach unten schieben — weshalb „Woher kommt dieser Abstand?” ein so beständiges Debugging-Genre bleibt.

Zwei nützliche Grenzen: Horizontale Margins fallen nie zusammen, und die Kinder von Flex- und Grid-Containern fallen in keine Richtung zusammen.

Was solltest du statt Geschwister-Margins verwenden?

Gib den Raum dem Elternelement. Flex- und Grid-Container haben eine gap-Eigenschaft, die einen festen Abstand zwischen Kindern setzt — kein Collapsing, keine Ausnahmen für erstes und letztes Kind, keine Meinungen von Komponenten:

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;      /* zwischen Kindern */
  padding: 23px;  /* zwischen Kindern und der Container-Kante */
}

Die Arbeitsteilung wird sauber: Das Padding des Containers regelt den Abstand von seiner Kante zum Inhalt, gap regelt die Abstände zwischen den Kindern, und jedes Kind kümmert sich nur um sein eigenes Padding. Jeder Abstand auf dem Bildschirm hat genau einen Besitzer, und die Bug-Klasse des rätselhaften Abstands verliert ihren Lebensraum.

Margins verschwinden nicht ganz aus dem Werkzeugkasten. Fließtext ist die bleibende Ausnahme: Der richtige Abstand hängt dort vom Paar ab — Überschrift-zu-Absatz unterscheidet sich von Absatz-zu-Absatz — und das einheitliche gap eines Containers kann nicht pro Paar variieren. Zwischen Komponenten ist ein dem Elternelement gehörendes Gap jedoch das Muster, auf das sich die meisten modernen Layouts geeinigt haben.

Sollten Margin, Padding und Gap eine Skala teilen?

Ja — es ist dieselbe Design-Entscheidung (wie weit stehen Dinge auseinander?), gehalten von verschiedenen Besitzern, also sollten sie sich aus demselben kurzen Menü bedienen. Eine Abstände-Skala, erzeugt aus einer 16px-Basis, dem Verhältnis 2 und zwei Zwischenschritten pro Verdopplung, ergibt 8, 11, 16, 23, 32, 45, 64: Das kleine Ende deckt Padding innerhalb kompakter Komponenten ab, die Mitte deckt Abstände zwischen Elementen ab, und das große Ende deckt Abschnitte ab. Wenn Innen- und Außenabstände aus einer Skala stammen, bleiben das Padding einer Karte und der Abstand zwischen Karten proportional, obwohl unterschiedliche Besitzer sie setzen.

Wem gehört welcher Abstand auf Seiten-Ebene?

Die Besitz-Regel zahlt sich am sichtbarsten auf einer ganzen Seite aus, wo Dutzende Abstände sonst Dutzende lokale Entscheidungen wären. Stege sind die Idee des dem Elternelement gehörenden Gap, angewandt auf das gesamte Layout: Spalten besitzen ihre Abstände nicht, das Raster tut es — 4 Spalten auf dem Handy, 8 auf dem Tablet, 12 auf dem Desktop, jeder Steg und jeder Rand ein Schritt auf derselben Skala. Wenn du den Besitzer jedes Abstands auf der Seite benennen kannst, hat sich die Margin-vs-Padding-Frage von selbst beantwortet: schalte die Stege und Ränder in der Raster-Ansicht durch diese Skala.