Generator skali odstępów
Generator skali odstępów buduje system odstępów z jednostki bazowej 4, 5, 6 lub 8 px w 12, 16 lub 20 krokach i eksportuje go jako właściwości niestandardowe CSS w px lub rem.
O tym narzędziu
Generator skali odstępów buduje system odstępów z jednostki bazowej 4, 5, 6 lub 8 px w 12, 16 lub 20 krokach i eksportuje go jako właściwości niestandardowe CSS w px lub rem.
Jak używać
- Wybierz jednostkę bazową, np. 4 px lub 8 px.
- Wybierz wynik w px lub rem.
- Wybierz, ilu kroków potrzebujesz.
- Kliknij Copy CSS Variables, aby dodać skalę do arkusza stylów.
Warto wiedzieć
- Odstępy w Tailwind CSS opierają się na jednostce 4 px (0.25 rem).
- Material Design używa siatki 8 dp, z 4 dp do drobnych korekt.
- Wielokrotności takie jak 0.5, 1, 1.5, 2, 3, 4, 6 i 8 pokrywają większość potrzeb.
- Wartości rem zakładają tu główny rozmiar czcionki 16 px.
- Stała skala zastępuje przypadkowe wartości w pikselach i utrzymuje wizualną spójność układów.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
System odstępów 4px czy 8px?
8 px to popularny wybór dla układów; 4 px daje dokładniejszą kontrolę w gęstych interfejsach i małych komponentach. Wiele zespołów używa kroków 4 px w rytmie 8 px.
Czym jest skala odstępów w design systemie?
To zdefiniowany z góry zestaw wartości odstępów używanych do marginesów, paddingu i gapów, dzięki któremu każdy ekran korzysta z tych samych przyrostów.
Jak użyć skali w CSS?
Skopiuj zmienne i używaj ich w stylu padding: var(--space-4); — dzięki temu odstępy są spójne we wszystkich komponentach.
Czy to to samo co odstępy w Tailwind?
Przy bazie 4 px i wyniku w rem wartości odpowiadają tym samym wielokrotnościom co domyślna skala odstępów Tailwind.