Spacing & Layout
Das 8px-Grid-System: Wie konsistente Abstände professionell wirkendes UI fast automatisch erzeugen — und warum Whitespace kein verschwendeter Platz ist.
- Das 8px-Grid-System verstehen und in CSS direkt anwenden können
- Den Unterschied zwischen Padding und Margin gezielt einsetzen
- Whitespace als aktives Gestaltungsmittel — nicht als Lücke — begreifen
- Mehrdeutiges Spacing erkennen und durch klare Gruppenabstände beheben
- Spacing Tokens als Teil eines Design Systems definieren und nutzen
Kerngedanke
Spacing ist der unsichtbare Klebstoff jedes Interfaces. Entwickler denken oft: „Ich gebe dem Element einfach etwas margin." Aber ohne ein System entstehen dabei 37 verschiedene Abstände, die nichts miteinander zu tun haben. Das Ergebnis fühlt sich chaotisch an — selbst wenn die einzelnen Werte für sich genommen gar nicht falsch wären. Konsistenz im Spacing ist wichtiger als der einzelne Wert.
Das 8px-System schafft genau diese Konsistenz: Alle Abstände sind Vielfache von 8 (oder 4 für feinere Schritte). Das Gehirn nimmt diesen Rhythmus wahr, ohne ihn zu benennen — und empfindet das Interface als „aufgeräumt" und „professionell". Das ist kein Zufall, sondern angewandte Wahrnehmungspsychologie.
Theorie
Das 8px-Grid-System
Das 8px-System ist ein Spacing-Standard, der in fast allen professionellen Design Systems verwendet wird — von Material Design über Tailwind bis Ant Design. Die Idee ist simpel: alle Abstände, Größen und Positionen sind Vielfache von 8px (für feine Details auch von 4px). Statt frei gewählter Werte wie 13px, 17px oder 22px greifst du immer aus einer vordefinierten Skala.
Warum ausgerechnet 8px?
8 lässt sich problemlos durch 2 und 4 teilen — das erzeugt halbe Schritte (4px) für feine Details und verhindert Subpixel-Rendering-Probleme. Außerdem entspricht 8px dem natürlichen Sehkomfort für minimale visuelle Trennung.
Exponentiell, nicht linear
Gute Spacing-Skalen sind nicht gleichmäßig (8, 16, 24, 32…). Sie wachsen mit zunehmendem Abstand schneller: 4, 8, 12, 16, 24, 32, 48, 64. So ist der Unterschied zwischen kleinen Werten spürbar, ohne dass große Werte ins Unendliche driften.
Tokens statt Magic Numbers
In CSS werden diese Werte als Custom Properties definiert (z.B. --space-md: 16px). So gibt es keinen Grund mehr, einen Wert zweimal zu erfinden — und Änderungen propagieren automatisch überall hin.
Padding vs. Margin: die Faustregel
Padding gehört zum Element selbst und beeinflusst dessen Klickfläche und visuellen Raum. Margin definiert die Beziehung zwischen Elementen. Innerer Raum (Padding) zuerst denken, dann äußere Abstände (Margin).
Vergleichsbeispiel 1 von 4
Zu wenig Whitespace in einer Card
Eines der häufigsten Muster bei Entwickler-UIs: Alles bekommt das minimale Padding, das nötig ist, damit es nicht komplett kaputt aussieht. Das Ergebnis wirkt gedrängt und klinisch. Dabei ist mehr Luft nicht mehr Verschwendung — es ist Struktur.
Im Vorher-Beispiel sind alle Abstände auf das absolute Minimum reduziert. Dadurch wirken die Elemente wie zusammengepresst — das Auge findet keine Ruhepunkte und muss sich orientieren, bevor es Inhalte lesen kann.
Im Nachher-Beispiel folgen alle Abstände der Skala: 16px Card-Padding (--space-md), 8px Gap (--space-sm), 12px Divider-Margin. Dieser Rhythmus entsteht automatisch — der Entwickler muss keine Werte mehr erfinden.
Starte immer mit zu viel Whitespace, dann entferne schrittweise. Es ist leichter, Luft zu reduzieren als nachträglich einzufügen.
Vergleichsbeispiel 2 von 4
Mehrdeutiges Spacing in Formularen
Wenn der Abstand zwischen einem Label und dem zugehörigen Feld genauso groß ist wie der Abstand zum nächsten Feld, entsteht Verwirrung: Gehört das Label zum Feld darüber oder darunter? Dieses Problem löst man nicht mit Linien oder Boxen, sondern mit Spacing.
Im Vorher-Beispiel hat jedes Element den gleichen Abstand. Das Label „Passwort" ist genauso weit vom E-Mail-Feld entfernt wie vom Passwort-Feld — es ist unklar, wozu es gehört.
Im Nachher-Beispiel ist der Abstand zwischen Label und zugehörigem Feld klein (4px), der Abstand zwischen Gruppen groß (16px). Dadurch bilden sich visuelle Einheiten — das Gestaltprinzip der Nähe macht die Zugehörigkeit sofort klar.
Der Abstand zwischen Gruppen muss immer größer sein als der Abstand innerhalb einer Gruppe. Nur so entstehen klare visuelle Zusammenhänge.
Praxisaufgabe
Spacing-Refactoring einer Settings-Page
Spacing-Refactoring einer Settings-Page
Du bekommst eine Settings-Page mit inkonsistenten Abständen. Alle Werte sind willkürlich gewählt (13px, 17px, 22px…). Refactore alle Spacing-Werte auf die 8px-Skala.
- Ersetze alle willkürlichen Margin/Padding-Werte durch Token aus der Skala (--space-xs bis --space-3xl)
- Stelle sicher, dass Labels näher an ihrem Feld stehen als am vorherigen Element
- Verwende gap statt individuellem margin für Listen und Gruppen
- Prüfe, ob Padding innerhalb von Cards konsistent ist (z.B. immer --space-lg)
- Bonus: Definiere eigene Spacing-Token für wiederkehrende Patterns