Generator de Scară de Spațiere
Generatorul de scală de spațiere construiește un sistem de spațiere dintr-o unitate de bază de 4, 5, 6 sau 8 px, în 12, 16 sau 20 de pași, și îl exportă ca proprietăți CSS personalizate în px sau rem.
Despre acest instrument
Generatorul de scală de spațiere construiește un sistem de spațiere dintr-o unitate de bază de 4, 5, 6 sau 8 px, în 12, 16 sau 20 de pași, și îl exportă ca proprietăți CSS personalizate în px sau rem.
Cum se folosește
- Alege o unitate de bază, de exemplu 4 px sau 8 px.
- Alege rezultatul în px sau rem.
- Alege câți pași îți trebuie.
- Apasă Copy CSS Variables pentru a adăuga scala în foaia de stil.
Bine de știut
- Spațierea din Tailwind CSS se bazează pe o unitate de 4 px (0.25 rem).
- Material Design folosește o grilă de 8 dp, cu 4 dp pentru ajustări fine.
- Multiplii precum 0.5, 1, 1.5, 2, 3, 4, 6 și 8 acoperă majoritatea nevoilor de spațiere.
- Valorile rem de aici presupun o mărime de font rădăcină de 16 px.
- O scală fixă înlocuiește valorile arbitrare în pixeli și păstrează layout-urile coerente vizual.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Ar trebui să folosesc un sistem de spațiere de 4px sau de 8px?
8 px este o valoare implicită frecventă pentru layout-uri; 4 px oferă control mai fin pentru interfețe dense și componente mici. Multe echipe folosesc pași de 4 px într-un ritm de 8 px.
Ce este o scală de spațiere într-un design system?
Un set predefinit de valori de spațiere folosite pentru margin, padding și gap, astfel încât fiecare ecran să folosească aceleași incremente.
Cum folosesc scala în CSS?
Copiază variabilele și folosește-le de exemplu așa: padding: var(--space-4); ca spațierea să rămână consecventă între componente.
Este la fel ca spațierea din Tailwind?
Cu o bază de 4 px și rezultat în rem, valorile urmează aceiași multipli ca scala de spațiere implicită din Tailwind.