Avståndsskalagenerator — Konsekvent Avståndssystem Gratis

Slumpmässiga margin- och padding-värden skapar visuell kaos. En avståndsskala — en fördefinierad uppsättning värden som följer ett konsekvent förhållande — ger ordning och rytm till dina layouter. Vår avståndsskalagenerator skapar en harmonisk uppsättning avståndstokens klara för ditt CSS-designsystem.

Vad är en avståndsskala?

En avståndsskala är en uppsättning fördefinierade avståndsvärden som används för marginaler, utfyllnad och mellanrum i ett designsystem. Precis som en typografiskala följer den en matematisk progression — vanligtvis en 4px eller 8px basenhet multiplicerad med konsekventa faktorer. Detta säkerställer att avståndsbeslut aldrig är godtyckliga.

Hur använder du avståndsskalageneratorn?

Ange din basenhet för avstånd (vanligtvis 4px eller 8px). Välj en progressionsmetod: linjär (4, 8, 12, 16...), geometrisk (4, 8, 16, 32...) eller anpassade multiplikatorer. Verktyget genererar en komplett skala med visuella förhandsvisningar som visar det faktiska avståndet. Kopiera CSS-anpassade egenskaper (--space-1, --space-2, ...) för omedelbar användning i ditt projekt.

Bästa praxis

Använd en 4px eller 8px bas — dessa värden stämmer överens med de flesta webbläsarstandard, gridsystem och designverktyg. Begränsa din skala till 8–12 värden. Namnge dina avståndstokens semantiskt (--space-xs, --space-sm) eller numeriskt (--space-1, --space-2) — undvik att namnge dem efter deras pixelvärde.