Penghasil Skala Spasi
Generator Spacing Scale menyusun sistem spacing dari unit dasar 4, 5, 6, atau 8 px dalam 12, 16, atau 20 langkah, lalu mengekspornya sebagai CSS custom properties dalam px atau rem.
Tentang alat ini
Generator Spacing Scale menyusun sistem spacing dari unit dasar 4, 5, 6, atau 8 px dalam 12, 16, atau 20 langkah, lalu mengekspornya sebagai CSS custom properties dalam px atau rem.
Cara menggunakan
- Pilih unit dasar, misalnya 4 px atau 8 px.
- Pilih output px atau rem.
- Tentukan jumlah langkah yang Anda butuhkan.
- Klik Copy CSS Variables untuk menambahkan skala ke stylesheet Anda.
Perlu diketahui
- Spacing Tailwind CSS berbasis unit 4 px (0.25 rem).
- Material Design memakai grid 8 dp, dengan 4 dp untuk penyesuaian kecil.
- Kelipatan seperti 0.5, 1, 1.5, 2, 3, 4, 6, dan 8 sudah mencakup sebagian besar kebutuhan spacing.
- Nilai rem di sini mengasumsikan ukuran font root 16 px.
- Skala tetap menggantikan nilai piksel yang asal-asalan dan menjaga tata letak tetap konsisten secara visual.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Sebaiknya memakai sistem spacing 4px atau 8px?
8 px adalah bawaan yang umum untuk tata letak; 4 px memberi kontrol lebih halus untuk antarmuka padat dan komponen kecil. Banyak tim memakai langkah 4 px di dalam ritme 8 px.
Apa itu spacing scale dalam design system?
Sekumpulan nilai spacing yang sudah ditentukan untuk margin, padding, dan gap, sehingga setiap layar memakai kelipatan yang sama.
Bagaimana cara memakai skala ini di CSS?
Salin variabelnya dan gunakan seperti padding: var(--space-4); agar spacing tetap konsisten di semua komponen.
Apakah ini sama dengan spacing Tailwind?
Dengan unit dasar 4 px dan output rem, nilainya mengikuti kelipatan yang sama dengan skala spacing bawaan Tailwind.