Boşluk Ölçeği Oluşturucu Özelleştirilebilir temel birim ve çarpanlarla tutarlı bir boşluk ölçeği sistemi oluşturun.
Boşluk Ölçeği Oluşturucu
Özelleştirilebilir temel birim ve çarpanlarla tutarlı bir boşluk ölçeği sistemi oluşturun.
Temel birimi ayarla
Piksel cinsinden temel boşluk değerini seçin (genellikle 4px veya 8px).
Çıkış birimini seç
Oluşturulan boşluk değerleri için px veya rem'i seçin.
CSS değişkenlerini kopyala
Görsel ölçeği önizleme ve CSS özel özelliklerini kopyalama.
What Is Boşluk Ölçeği Oluşturucu?
Aralık Ölçeği Oluşturucu, web tasarımı için bir temel birimle çarpılan önceden tanımlanmış bir dizi faktör kullanarak tutarlı bir aralık sistemi oluşturur. Tutarlı aralıklar profesyonel ve uyumlu tasarımlar için kritiktir - olmadan, düzenler tutarsız ve cilasız görünür. Bu araç, genellikle 4px veya 8px olan bir temel birim (0, 0,5, 1, 1,5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24) faktörlerle çarpılarak kapsamlı bir aralık ölçeği oluşturmak için kullanılır. Görsel ön izleme, her aralık değerini renklendirilmiş bir çubuk olarak gösterir ve göreceli farklılıkları görmek kolaydır. Çıkış, CSS özel özelliklerinin (--space-0'dan --space-24'e) px veya rem olarak bir kümesidir ve stil sayfanızdaki kenar boşluğu, dolgu, aralık ve diğer aralık değerleri olarak kullanıma hazırdır.
Why Use Boşluk Ölçeği Oluşturucu?
-
Matematiksel olarak tutarlı boşluk için temel birim sistemi
-
Bağlantılı boşluk farklılıklarını gösteren görsel bir çubuk grafiği
-
Tasarım sistemi entegrasyonu için CSS özel özellikleri çıkışı
-
Hem px hem de rem çıkış birimlerini destekler
Common Use Cases
Tasarım Sistemi Tokenları
Bir tasarım sisteminin temelini oluşturan boşluk tokenlarını oluştur.
Bileşen Kütüphanesi Boşluğu
Bir kütüphane içindeki tüm bileşenler arasında tutarlı boşluğu sağlayın.
Yeni Proje Kurulumu
Yeni web projeleri başlarken bir boşluk sistemi kurun.
Takım Hizalaması
Tasarım ve geliştirme ekipleri arasında standartlaştırılmış bir boşluk ölçeğini paylaşın.
Technical Guide
Bir aralık ölçeği, tutarlı ve orantılı aralık değerleri oluşturmak için bir dizi faktörle çarpılan bir temel birim kullanır. En yaygın temel birimler, Tailwind CSS ve Material Design tarafından kullanılan 4px ve birçok tasarım sistemi tarafından kullanılan 8pxdir. 4px'lik bir temel birim ince ayarlı kontrol sağlar: 4, 8, 12, 16, 20, 24, 32, 40 vb. 8px'lik bir temel birim daha büyük atlamalar oluşturur: 8, 16, 24, 32, 40, 48 vb. CSS özel özellikleri (değişkenler) değerleri yeniden kullanım için depolar: --space-1: 0,25rem. Bunlar kenar boşluğu, dolgu, aralık ve diğer herhangi bir aralık özelliğinde kullanılabilir. Rem birimlerini kullanmak, aralığın kök yazı tipi boyutuyla orantılı olarak ölçeklenmesini sağlar ve kullanıcılar metin boyutunu değiştirdiğinde oranları korur. Yarı adım (0,5x) ince ayarlamalar için daha küçük bir artış sağlar. Büyük çarpanlar (16x, 20x, 24x) bölüm aralıklarını ve büyük düzen boşluklarını işler.
Tips & Best Practices
-
1İnce ayarlı kontrol için 4px temel kullanın, daha basit ölçek için 8px
-
2Erişilebilir ve ölçeklenebilir boşluk için rem birimlerini uygulayın
-
3Kolay küresel boşluk ayarlamaları için CSS özel özelliklerini kullanın
-
4Ölçek değerlerine bağlı kalın - tutarlılık için keyfi boşluğu kaçının
Related Tools
CSS Grid Oyun Alanı
Etkileşimli kontroller ile şablon sütunları, satırları ve boşlukları oluşturabileceğiniz görsel CSS Grid yapımcısı.
🎨 CSS & Design
Tailwind Yapılandırma Oluşturucu
Özel renkler, yazı tipleri ve kırılma noktaları ile Tailwind CSS yapılandırma dosyalarını oluşturun.
🎨 CSS & Design
Tipografi Ölçeği Oluşturucu
Özelleştirilebilir temel boyut, oran ve birimlerle modüler bir tipografik ölçek oluşturun.
🎨 CSS & Design
CSS Değişken Oluşturucu
Renkler, boşluklar ve tipografi için özel CSS özelliklerini (değişkenleri) oluşturun.
🎨 CSS & DesignFrequently Asked Questions
Q Hangi temel boyutu kullanmalıyım?
Q Px mi yoksa rem mi kullanmalıyım?
Q Neden keyfi boşluk değerlerini kullanmıyorum?
Q Bu boşluk değerlerini nasıl kullanacağım?
Q Çarpan kümesini değiştirebilir miyim?
About This Tool
Boşluk Ölçeği Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.