Warum Abstände fluide machen
Großzügiger Weißraum lässt ein Desktop-Layout ruhig wirken, doch dasselbe Sektions-Padding von 96px verschenkt auf dem Smartphone ein Drittel des Bildschirms. Feste Breakpoints lösen das in Stufen und lassen Tablets oft mit zu engen oder zu weiten Abständen zurück. Ein fluider Wert wächst stetig, jeder Bildschirm erhält Raum im Verhältnis zu seiner Breite, und du schreibst eine Deklaration statt drei.
Dieselbe Mathematik wie bei fluider Schrift
Abstände nutzen genau dieselbe lineare Formel wie Schriftgrößen: ein Minimum, ein Maximum und eine Gerade zwischen zwei Viewport-Breiten. Der Unterschied liegt in den Zahlen. Abstände wachsen oft um einen größeren Faktor als Text – von 24px auf 64px Sektions-Padding ist üblich –, weil Weißraum nicht lesbar bleiben muss. Der 2,5×-Zoom-Hinweis der WCAG gilt für Abstände nicht, erscheint aber als Erinnerung, falls du den Wert für Text wiederverwendest.
Eine Abstandsskala aufbauen
Für ein konsistentes System definierst du einige fluide Abstands-Tokens wie --space-s, --space-m und --space-l, jeweils mit eigenem Minimum und Maximum. Die kleinen nutzt du für Lücken innerhalb von Komponenten, die mittleren für das Padding von Karten und die großen zwischen Seitenabschnitten. Kombiniere sie mit einer fluiden Typo-Skala im selben Viewport-Bereich, damit Text und Raum im Gleichschritt wachsen.
In Tailwind setzt du das Ergebnis als beliebigen Wert ein, etwa p-[clamp(…)], gap-[clamp(…)] oder my-[clamp(…)]. Der Rechner gibt eine fertige Klasse mit Unterstrichen statt Leerzeichen aus – so erwartet Tailwind Leerzeichen in beliebigen Werten.
Tipps
Halte auch Abstände in rem, damit sie zusammen mit dem Text die Schrifteinstellungen der Nutzer respektieren. Verzichte bei Rahmen und Haarlinien auf fluide Werte, da Pixelbruchteile unscharf wirken können. Prüfe die Vorschau bei 320px, ob das Padding noch genug Platz für Inhalte lässt.