Avståndsskalgenerator
Generatorn bygger ett avståndssystem från en grundenhet på 4, 5, 6 eller 8 px i 12, 16 eller 20 steg och exporterar det som CSS custom properties i px eller rem.
Om verktyget
Generatorn bygger ett avståndssystem från en grundenhet på 4, 5, 6 eller 8 px i 12, 16 eller 20 steg och exporterar det som CSS custom properties i px eller rem.
Så använder du det
- Välj en grundenhet, till exempel 4 px eller 8 px.
- Välj px eller rem.
- Välj hur många steg du behöver.
- Klicka på Copy CSS Variables för att lägga till skalan i din stilmall.
Bra att veta
- Avstånden i Tailwind CSS utgår från en enhet på 4 px (0.25 rem).
- Material Design använder ett rutnät på 8 dp, med 4 dp för små justeringar.
- Multiplar som 0.5, 1, 1.5, 2, 3, 4, 6 och 8 täcker de flesta behov av avstånd.
- rem-värdena här förutsätter en rotfontstorlek på 16 px.
- En fast skala ersätter godtyckliga pixelvärden och håller layouterna visuellt enhetliga.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Ska jag använda ett avståndssystem på 4px eller 8px?
8 px är en vanlig standard för layouter; 4 px ger finare kontroll för täta gränssnitt och små komponenter. Många team använder steg om 4 px inom en rytm på 8 px.
Vad är en avståndsskala i designsystem?
En fördefinierad uppsättning avståndsvärden för margin, padding och gap, så att varje vy använder samma steg.
Hur använder jag skalan i CSS?
Kopiera variablerna och använd dem som padding: var(--space-4); så att avstånden blir konsekventa mellan komponenter.
Är det här samma sak som avstånden i Tailwind?
Med en grund på 4 px och rem som enhet följer värdena samma multiplar som Tailwinds standardskala för avstånd.