Generator Skala Spasi Buat sistem skala spasi yang konsisten dengan satuan dasar dan pengali yang dapat disesuaikan.

🎨

Generator Skala Spasi

Buat sistem skala spasi yang konsisten dengan satuan dasar dan pengali yang dapat disesuaikan.

Tentukan satuan dasar

Pilih nilai spasi dasar dalam piksel (biasanya 4px atau 8px).

Pilih satuan keluaran

Pilih px atau rem untuk nilai spasi yang dihasilkan.

Salin variabel CSS

Pratinjau skala visual dan salin properti kustom CSS.

Loading tool...

What Is Generator Skala Spasi?

Generator Skala Spasi membuat sistem spasi konsisten untuk desain web dengan mengalikan satuan dasar dengan serangkaian faktor yang telah ditentukan. Spasi konsisten sangat penting untuk desain profesional dan harmonis-tanpa itu, tata letak terlihat tidak konsisten dan kurang rapi. Alat ini menggunakan satuan dasar (biasanya 4px atau 8px) dikalikan dengan faktor-faktor (0, 0,5, 1, 1,5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24) untuk menghasilkan skala spasi yang komprehensif. Pratinjau visual menampilkan setiap nilai spasi sebagai bilah berwarna, sehingga mudah untuk melihat perbedaan relatif. Hasilnya adalah sekumpulan properti kustom CSS (--space-0 hingga --space-24) dalam satuan px atau rem, siap digunakan sebagai margin, padding, celah, dan nilai spasi lainnya di seluruh stylesheet.

Why Use Generator Skala Spasi?

Sistem satuan dasar untuk konsistensi matematis dalam spasi
Grafik batang visual yang menunjukkan perbedaan spasi relatif
Keluaran properti kustom CSS untuk integrasi sistem desain
Mendukung kedua satuan keluaran px dan rem

Common Use Cases

Token Sistem Desain

Generate token spasi sebagai dasar dari sistem desain.

Spasi Perpustakaan Komponen

Pastikan konsistensi spasi di semua komponen dalam perpustakaan.

Pengaturan Proyek Baru

Tetapkan sistem spasi saat memulai proyek web baru.

Penyelarasan Tim

Bagikan skala spasi standar di seluruh tim desain dan pengembangan.

Technical Guide

Skala spasi menggunakan satuan dasar dikalikan dengan serangkaian faktor untuk menciptakan nilai spasi konsisten dan proporsional. Satuan dasar yang paling umum adalah 4px (digunakan oleh Tailwind CSS dan Material Design) dan 8px (digunakan oleh banyak sistem desain). Basis 4px menciptakan kontrol halus: 4, 8, 12, 16, 20, 24, 32, 40, dll. Basis 8px menciptakan lompatan yang lebih besar: 8, 16, 24, 32, 40, 48, dll. Properti kustom CSS (variabel) menyimpan nilai-nilai untuk digunakan kembali: --space-1: 0,25rem. Ini dapat digunakan dalam margin, padding, celah, dan properti spasi lainnya. Menggunakan satuan rem memastikan bahwa spasi berkala dengan ukuran font root, sehingga menjaga proporsi saat pengguna mengubah ukuran teks. Langkah setengah (0,5x) menyediakan increment yang lebih kecil untuk penyesuaian halus. Pengali besar (16x, 20x, 24x) menangani spasi bagian dan celah tata letak yang besar.

Tips & Best Practices

1
Gunakan basis 4px untuk kontrol yang lebih halus, 8px untuk skala yang lebih sederhana
2
Terapkan satuan rem untuk spasi yang dapat diakses dan skalabel
3
Gunakan properti kustom CSS untuk penyesuaian spasi global yang mudah
4
Patuhi nilai skala - hindari spasi sewenang-wenang untuk konsistensi

Related Tools

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨 CSS & Design

Generator Konfigurasi Tailwind

Buat file konfigurasi Tailwind CSS dengan warna, font, dan breakpoint kustom.

🎨 CSS & Design

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨 CSS & Design

Frequently Asked Questions

Q Berapa ukuran dasar yang harus saya gunakan?

4px adalah yang paling populer (digunakan oleh Tailwind). 8px menyediakan skala yang lebih sederhana dan lebih terbatas.

Q Apakah saya harus menggunakan px atau rem?

rem lebih disukai untuk aksesibilitas karena skalanya dengan preferensi ukuran font pengguna.

Q Mengapa tidak menggunakan nilai spasi sewenang-wenang?

Skala yang konsisten menciptakan harmoni visual dan membuat desain terlihat lebih rapi dan profesional.

Q Bagaimana saya menggunakan nilai spasi ini?

Gunakan properti kustom CSS untuk margin, padding, gap: margin: var(--space-4);

Q Bisakah saya memodifikasi set pengali?

Set standar mencakup kebutuhan mayoritas, tetapi Anda dapat menambah atau menghapus pengali dengan mengedit CSS yang dihasilkan.

About This Tool

Generator Skala Spasi 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.