Negative space, atau whitespace, adalah ruang kosong di sekitar dan di antara elemen. Ruang ini bukan sisa yang terbuang: dia yang memberi tahu mata mana yang satu kelompok dan mana yang terpisah. Bayangin papan menu warung yang ditulis rapat tanpa baris kosong: "Es teh" dan "Nasi goreng" bercampur, dan kamu harus membaca semuanya untuk tahu mana minuman. Kasih satu baris kosong di antara kelompok makanan dan minuman, dan mata langsung menangkap dua kelompok sebelum membaca satu kata pun.
🧪 Tebakan cepat: Kartu kamar terakhir punya
margin-bottom: 16px, dan bagian yang membungkusnya punyamargin-bottom: 64px. Jarak dari kartu itu ke bagian berikutnya berapa: 16px, 64px, atau 80px? Jawabannya ada di bagian "Margin vertikal bisa menyatu".
Micro dan macro whitespace
Whitespace punya dua ukuran:
- Micro whitespace: ruang kecil di dalam komponen. Padding di dalam kartu, padding tombol, jarak ikon ke teksnya, line-height paragraf.
- Macro whitespace: ruang besar antar bagian halaman. Jarak dari header ke isi, jarak antara bagian "Pilih kamar" dan bagian "Cara ke Homestay Kabut".
Micro whitespace bikin satu komponen enak dibaca. Macro whitespace bikin halaman terbaca sebagai beberapa bagian, bukan satu tumpukan panjang.
Skala jarak: kelipatan 4 dan 8
Jangan memilih jarak dengan perasaan ("13px kayaknya pas"). Pakai skala yang tetap, dari kelipatan 4 dan 8:
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}
- Angka kecil (4, 8, 12, 16) untuk micro: di dalam kartu dan tombol.
- Angka besar (48, 64) untuk macro: antar bagian halaman.
- Langkahnya makin lebar di atas (32, 48, 64). Beda 4px di jarak 8px itu 50%, tapi di jarak 60px cuma sekitar 7%, jadi di angka besar loncatannya harus lebih jauh supaya terasa.
Kamu gak perlu menciptakan skala ini sendiri. Satu langkah spacing di Tailwind adalah 0.25rem (4px), dan Material Design menyusun jaraknya dengan kelipatan 4 dan 8. Dengan skala yang sama, desainer dan developer menyebut angka yang sama, dan halaman punya ritme yang konsisten.
Jarak yang mengelompokkan
Ini kartu Kamar Teras. Isinya tiga hal: nama kamar, harga, dan tombol pilihan malam. Nama dan harga itu satu kelompok (kamar apa, berapa harganya), tombol malam kelompok lain (yang kamu pilih).
| Sama rata | Dikelompokkan | |
|---|---|---|
| nama → harga | 12px | 4px |
| harga → tombol malam | 12px | 16px |
Dengan jarak sama rata, harga mengambang di tengah: milik nama kamar atau milik tombol? Dengan 4px dan 16px, harga jelas menempel ke nama. Aturannya: jarak di dalam kelompok lebih kecil dari jarak antar kelompok. Prinsip ini disebut proximity (kedekatan), dan akan dibahas lagi di pelajaran Gestalt.
.name { margin: 0 0 4px; } /* dekat ke harga: satu kelompok */
.price { margin: 0 0 16px; } /* jauh dari tombol: kelompok lain */
Contoh: bagian "Pilih kamar"
Bagian kamar di halaman Bu Sri awalnya sesak. Ini nilai di kode awal latihan, dan nilai yang memberinya ruang:
| Jarak | Kode awal (sesak) | Lega |
|---|---|---|
padding di dalam kartu (.card padding) |
8px | 24px |
kartu ke kartu (.card margin-bottom) |
4px | 16px |
judul ke kartu pertama (h1 margin-bottom) |
4px | 24px |
bagian ke bagian berikutnya (.section margin-bottom) |
8px | 64px |
<section class="section">
<h1>Pilih kamar</h1>
<div class="card">Kamar Teras · Rp 350.000 / malam</div>
<div class="card">Kamar Loteng · Rp 275.000 / malam</div>
</section>
<style>
.card { padding: 24px; margin-bottom: 16px; } /* micro: ruang di dalam, lalu jarak antar kartu */
.section { margin-bottom: 64px; } /* macro: jarak ke bagian berikutnya */
h1 { margin-bottom: 24px; } /* judul ke isi bagiannya */
</style>
padding: 24pxmemberi ruang di dalam kartu, antara garis tepi dan tulisannya.margin-bottom: 16pxdi kartu memberi jarak ke kartu berikutnya. Lebih kecil dari padding-nya, dan itu gak apa-apa: garis tepi kartu sudah memisahkan..section64px adalah jarak terbesar di halaman, jadi bagian berikutnya terasa sebagai bagian baru.h124px: judul cukup dekat ke kartunya untuk terbaca sebagai judul bagian itu.
Margin vertikal bisa menyatu
Kartu terakhir punya margin-bottom: 16px, dan section-nya margin-bottom: 64px. Kelihatannya jaraknya 16 + 64 = 80px. Ternyata 64px. Margin atas dan bawah yang bersentuhan, tanpa padding atau garis tepi di antaranya, menyatu jadi satu, dan yang dipakai yang paling besar. Ini disebut margin collapsing. Itu jawaban tebakannya.
Ini cuma terjadi pada margin vertikal. Padding gak pernah menyatu, dan gap di flexbox atau grid juga gak.
⚠️ Jebakan yang sering ketemu
- Semua jarak sama. 12px di mana-mana kelihatan rapi, tapi gak ada yang mengelompok: harga mengambang, dan bagian baru gak terasa baru.
- Angka di luar skala. 5px, 7px, 13px. Tiap angka baru harus datang dari skala 4 dan 8.
- Menjumlahkan margin. 16 + 64 bukan 80. Margin vertikal yang bersentuhan menyatu jadi yang terbesar.
- Lega kebablasan. Kartu dengan padding 64px di HP 375px (halaman padding 16px) cuma menyisakan 375 - 32 - 128 = 215px untuk isinya. Whitespace yang berlebihan juga menyembunyikan isi.
TL;DR: Negative space (whitespace) adalah ruang kosong di sekitar dan di antara elemen, dan dia yang mengelompokkan. Micro whitespace ada di dalam komponen (padding kartu, padding tombol, line-height), macro whitespace ada antar bagian halaman (misalnya 64px sebelum bagian berikutnya). Ambil semua jarak dari skala kelipatan 4 dan 8: 4, 8, 12, 16, 24, 32, 48, 64. Jarak di dalam kelompok lebih kecil dari jarak antar kelompok: nama ke harga 4px, harga ke tombol 16px. Bagian kamar yang lega: kartu padding: 24px dan margin-bottom: 16px, h1 margin-bottom: 24px, .section margin-bottom: 64px. Margin vertikal yang bersentuhan menyatu: 16 dan 64 jadi 64, bukan 80.
