Abstands-Skala-Generator
Der Spacing Scale Generator baut ein Abstandssystem aus einer Basiseinheit von 4, 5, 6 oder 8 px in 12, 16 oder 20 Stufen auf und exportiert es als CSS Custom Properties in px oder rem.
Über dieses Tool
Der Spacing Scale Generator baut ein Abstandssystem aus einer Basiseinheit von 4, 5, 6 oder 8 px in 12, 16 oder 20 Stufen auf und exportiert es als CSS Custom Properties in px oder rem.
So funktioniert’s
- Wähle eine Basiseinheit, etwa 4 px oder 8 px.
- Wähle die Ausgabe in px oder rem.
- Wähle, wie viele Stufen du brauchst.
- Klicke auf „CSS-Variablen kopieren“, um die Skala in dein Stylesheet einzufügen.
Gut zu wissen
- Die Abstände in Tailwind CSS basieren auf einer Einheit von 4 px (0.25 rem).
- Material Design nutzt ein 8-dp-Raster, mit 4 dp für kleine Anpassungen.
- Vielfache wie 0.5, 1, 1.5, 2, 3, 4, 6 und 8 decken die meisten Abstandsbedürfnisse ab.
- Die rem-Werte gehen hier von einer Root-Schriftgröße von 16 px aus.
- Eine feste Skala ersetzt willkürliche Pixelwerte und sorgt für visuell einheitliche Layouts.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Sollte ich ein 4px- oder ein 8px-Abstandssystem verwenden?
8 px ist ein gängiger Standard für Layouts; 4 px ermöglicht feinere Kontrolle bei dichten Oberflächen und kleinen Komponenten. Viele Teams nutzen 4-px-Schritte innerhalb eines 8-px-Rasters.
Was ist eine Abstandsskala in Designsystemen?
Ein vordefinierter Satz von Abstandswerten für margin, padding und gap, damit jeder Screen dieselben Abstufungen verwendet.
Wie verwende ich die Skala in CSS?
Kopiere die Variablen und nutze sie etwa als padding: var(--space-4); – so bleiben die Abstände über alle Komponenten hinweg einheitlich.
Ist das dasselbe wie die Abstände in Tailwind?
Mit einer Basis von 4 px und rem-Ausgabe folgen die Werte denselben Vielfachen wie die Standard-Abstandsskala von Tailwind.