Afstandsschaalgenerator
De spacing scale generator bouwt een spacingsysteem op basis van een eenheid van 4, 5, 6 of 8 px in 12, 16 of 20 stappen en exporteert het als CSS custom properties in px of rem.
Over deze tool
De spacing scale generator bouwt een spacingsysteem op basis van een eenheid van 4, 5, 6 of 8 px in 12, 16 of 20 stappen en exporteert het als CSS custom properties in px of rem.
Zo gebruik je het
- Kies een basiseenheid, zoals 4 px of 8 px.
- Kies output in px of rem.
- Kies hoeveel stappen je nodig hebt.
- Klik op Copy CSS Variables om de schaal aan je stylesheet toe te voegen.
Goed om te weten
- Spacing in Tailwind CSS is gebaseerd op een eenheid van 4 px (0.25 rem).
- Material Design gebruikt een grid van 8 dp, met 4 dp voor kleine aanpassingen.
- Veelvouden zoals 0.5, 1, 1.5, 2, 3, 4, 6 en 8 dekken de meeste spacingbehoeften.
- rem-waarden gaan hier uit van een root-lettergrootte van 16 px.
- Een vaste schaal vervangt willekeurige pixelwaarden en houdt lay-outs visueel consistent.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Moet ik een spacingsysteem van 4px of 8px gebruiken?
8 px is een gebruikelijke standaard voor lay-outs; 4 px geeft fijnere controle voor compacte interfaces en kleine componenten. Veel teams gebruiken stappen van 4 px binnen een ritme van 8 px.
Wat is een spacing-schaal in design systems?
Een vooraf bepaalde reeks spacingwaarden voor margins, padding en gaps, zodat elk scherm dezelfde stappen gebruikt.
Hoe gebruik ik de schaal in CSS?
Kopieer de variabelen en gebruik ze bijvoorbeeld als padding: var(--space-4); zodat de spacing tussen componenten consistent blijft.
Is dit hetzelfde als spacing in Tailwind?
Met een basis van 4 px en output in rem volgen de waarden dezelfde veelvouden als de standaard spacing-schaal van Tailwind.