Spacing-Skala-Generator

Abstandsskala aus einem Basiswert wie 4 px erzeugen, linear oder geometrisch – mit CSS-Variablen und Tailwind-Export.

Der Spacing-Skala-Generator erzeugt aus einem Basiswert wie 4 px eine konsistente Abstandsskala für UI-Designs. Du wählst zwischen einer linearen Skala mit Vielfachen der Basis und einer geometrischen Skala mit festem Verhältnis. Ergebnis sind eine Tabelle in px und rem sowie Export als CSS-Variablen und für Tailwind v4 und v3.

Skalenart

Basiswert

Faktoren

Pixelwerte auf ganze Zahlen runden

Name	px	rem
0,5	2	0.125rem
1	4	0.25rem
1,5	6	0.375rem
2	8	0.5rem
3	12	0.75rem
4	16	1rem
5	20	1.25rem
6	24	1.5rem
8	32	2rem
10	40	2.5rem
12	48	3rem
16	64	4rem
20	80	5rem
24	96	6rem

:root {
  --space-0_5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-1_5: 0.375rem; /* 6px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
}

Was ist eine Spacing-Skala?

Eine Spacing-Skala ist eine feste Menge erlaubter Abstände. Sie ersetzt beliebige Zahlenwerte durch wenige Stufen und ist die Grundlage für konsistente Designs, Komponentenbibliotheken und Design-Tokens.

Lineare und geometrische Skalen

Linear: Basis × Faktor. Übersichtlich, passt zu 4-px- und 8-px-Rastern.
Geometrisch: Basis × Verhältnisⁿ. Größere Sprünge bei großen Abständen.

So gehst du vor

Basis festlegen, meist 4 px.
Skalenart wählen und Tabelle prüfen.
Als CSS-Variablen oder Tailwind-Theme kopieren. Für fließende Abstände nutzt du den Fluid-Spacing-Generator.

Beispiel

Mit 4 px als Basis ergibt Faktor 4 genau 16 px (1 rem), Faktor 6 ergibt 24 px. Karten bekommen Innenabstand 6, Abstände zwischen Sektionen 16. Alle Werte in rem findest du auch im PX-REM-EM-Umrechner.

Häufige Fragen

Warum eine Spacing-Skala verwenden?

Eine feste Skala sorgt für einheitliche Abstände im ganzen Interface. Statt beliebiger Werte wie 13 px oder 17 px wählst du aus wenigen Stufen. Das beschleunigt Entscheidungen und macht Layouts ruhiger.

Was ist der Unterschied zwischen linear und geometrisch?

Linear heißt Vielfache der Basis: 4, 8, 12, 16 und so weiter, so arbeitet Tailwind. Geometrisch multipliziert jede Stufe mit einem festen Verhältnis, etwa 1,5. Dadurch wachsen die Sprünge bei großen Abständen stärker, wie in Typografie-Skalen.

4-px- oder 8-px-Raster?

Ein 8-px-Raster ist grob und sehr konsistent, ein 4-px-Raster erlaubt feinere Abstufungen, etwa für kompakte Komponenten. Viele Systeme nutzen 4 px als Basis und meist nur gerade Vielfache.

Wie funktioniert der Tailwind-v4-Export?

In Tailwind v4 genügt die Variable --spacing im @theme-Block. Alle Klassen wie p-4, gap-6 oder mt-10 rechnen dann Vielfache dieser Basis. Bei der geometrischen Skala entstehen benannte Werte wie --spacing-m.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.