Es gibt zehn Abstandsstufen: xxs · xs · s · m · l · xl · xxl · 3xl · 4xl · 5xl. Sie gelten für Innenabstand, Außenabstand und Lücken gleichermaßen.
Wo die Skala gilt
Dieselben Kürzel in drei Helfer-Familien:
| Familie | Regelt |
|---|---|
u-p-- |
Innenabstand (Padding) |
u-mb-- |
Abstand nach unten (Margin) |
u-gap-- |
Lücke zwischen Kindelementen |
Welche Stufe wofür
| Stufe | Typischer Einsatz |
|---|---|
xxs / xs |
innerhalb kleiner Elemente — Badge, Icon neben Text |
s |
zwischen zusammengehörenden Elementen — Überschrift und Text |
m |
Standard — Innenabstand von Karten, Abstand zwischen Absätzen |
l / xl |
zwischen Inhaltsblöcken innerhalb eines Abschnitts |
xxl bis 5xl |
große Trennungen — zwischen Themengruppen |
Für Abstände zwischen Sektionen nimm nicht diese Skala, sondern die Sektions-Stufen l-section--s bis --xxl. Die sind dafür gemacht und größer ausgelegt.
Warum die Abstände mitwachsen
Ab der Stufe l sind die Werte nicht fest, sondern rechnen sich aus der Bildschirmbreite. Auf einem 375-Pixel-Display ist u-mb--5xl deutlich kleiner als auf einem 1600-Pixel-Monitor — stufenlos, nicht in Sprüngen bei bestimmten Breiten.
Das ist der Grund, warum du keine eigenen Pixel eintragen sollst. Ein selbst gesetzter Abstand von 80 Pixeln bleibt mobil bei 80 Pixeln — und wirkt dort wie eine leere Seite.
Die kleinen Stufen (xxs bis m) sind fest. Bei 4 bis 16 Pixeln bringt Skalierung nichts, und feste Werte sind vorhersagbarer.
Nachbarstufen springen nicht stark
Die Skala ist bewusst fein abgestuft. Wenn dir ein Abstand „eine Winzigkeit zu groß“ erscheint, nimm die nächstkleinere Stufe — nicht einen eigenen Wert dazwischen. Bei zehn Stufen ist fast immer eine passend.
2xs oder 3xs — die kleinste Stufe heißt xxs. Und kein sm/md/lg. Diese Namen kennt das System nicht.