Generatore di Scala di Spaziatura
Il generatore di scale di spaziatura costruisce un sistema di spaziature da un'unità base di 4, 5, 6 o 8 px in 12, 16 o 20 passaggi e lo esporta come proprietà personalizzate CSS in px o rem.
Informazioni su questo strumento
Il generatore di scale di spaziatura costruisce un sistema di spaziature da un'unità base di 4, 5, 6 o 8 px in 12, 16 o 20 passaggi e lo esporta come proprietà personalizzate CSS in px o rem.
Come si usa
- Scegli un'unità base, per esempio 4 px o 8 px.
- Scegli l'output in px o rem.
- Scegli quanti passaggi ti servono.
- Clicca Copy CSS Variables per aggiungere la scala al tuo foglio di stile.
Da sapere
- Le spaziature di Tailwind CSS si basano su un'unità di 4 px (0.25 rem).
- Material Design usa una griglia di 8 dp, con 4 dp per le piccole regolazioni.
- Multipli come 0.5, 1, 1.5, 2, 3, 4, 6 e 8 coprono la maggior parte delle esigenze di spaziatura.
- I valori rem qui presuppongono una dimensione del font radice di 16 px.
- Una scala fissa sostituisce valori in pixel arbitrari e mantiene i layout visivamente coerenti.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Meglio un sistema di spaziature da 4px o da 8px?
8 px è un valore predefinito comune per i layout; 4 px offre un controllo più fine per interfacce dense e componenti piccoli. Molti team usano passaggi da 4 px all'interno di un ritmo da 8 px.
Cos'è una scala di spaziature nei design system?
Un insieme predefinito di valori di spaziatura usati per margini, padding e gap, così ogni schermata usa gli stessi incrementi.
Come uso la scala in CSS?
Copia le variabili e usale così: padding: var(--space-4); in questo modo le spaziature restano coerenti tra i componenti.
È uguale alle spaziature di Tailwind?
Con una base di 4 px e output in rem, i valori seguono gli stessi multipli della scala di spaziature predefinita di Tailwind.