Boşluk Ölçeği Oluşturucu
Spacing Scale Generator, 4, 5, 6 veya 8 px temel birimden 12, 16 veya 20 adımlık bir boşluk sistemi oluşturur ve bunu px veya rem cinsinden CSS özel özellikleri olarak dışa aktarır.
Bu araç hakkında
Spacing Scale Generator, 4, 5, 6 veya 8 px temel birimden 12, 16 veya 20 adımlık bir boşluk sistemi oluşturur ve bunu px veya rem cinsinden CSS özel özellikleri olarak dışa aktarır.
Nasıl kullanılır
- 4 px veya 8 px gibi bir temel birim seçin.
- px veya rem çıktısını seçin.
- Kaç adıma ihtiyacınız olduğunu seçin.
- Skalayı stil dosyanıza eklemek için Copy CSS Variables'a tıklayın.
Bilmekte fayda var
- Tailwind CSS boşlukları 4 px (0.25 rem) birimine dayanır.
- Material Design, küçük ayarlamalar için 4 dp ile birlikte 8 dp'lik bir ızgara kullanır.
- 0.5, 1, 1.5, 2, 3, 4, 6 ve 8 gibi katlar çoğu boşluk ihtiyacını karşılar.
- Buradaki rem değerleri 16 px kök font boyutunu varsayar.
- Sabit bir skala rastgele piksel değerlerinin yerini alır ve düzenleri görsel olarak tutarlı tutar.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
4px mi 8px boşluk sistemi mi kullanmalıyım?
8 px düzenler için yaygın bir varsayılandır; 4 px ise yoğun arayüzler ve küçük bileşenler için daha ince kontrol sağlar. Birçok ekip 8 px ritim içinde 4 px adımlar kullanır.
Tasarım sistemlerinde boşluk skalası nedir?
Margin, padding ve gap için kullanılan önceden tanımlanmış boşluk değerleri kümesidir; böylece her ekran aynı artışları kullanır.
Skalayı CSS'te nasıl kullanırım?
Değişkenleri kopyalayın ve padding: var(--space-4); şeklinde kullanın; böylece boşluklar bileşenler arasında tutarlı kalır.
Bu, Tailwind boşluklarıyla aynı mı?
4 px temel ve rem çıktısıyla değerler Tailwind'in varsayılan boşluk skalasıyla aynı katları izler.