Menata jarak antar elemen adalah pekerjaan harian, dan selama bertahun-tahun satu-satunya alatnya adalah margin. Margin bisa dipakai, tetapi menyisakan tiga gesekan yang selalu muncul: margin ujung yang harus dibersihkan, margin vertikal yang menyatu, dan logika margin yang ikut terbalik saat arah layout berubah. Property gap menyelesaikan ketiganya dengan satu deklarasi — dan sejak didukung penuh pada flexbox pada 2021, property ini menjadi pilihan standar untuk jarak antar item.
Masalah yang Diselesaikan Gap #
Perhatikan cara lama memberi jarak antar tombol dengan margin:
.deret-tombol .tombol-aksi {
margin-right: 12px;
}
.deret-tombol .tombol-aksi:last-child {
margin-right: 0; /* bersih-bersih wajib: jarak ekstra di ujung */
}Tiga gesekan dari pendekatan ini:
- Masalah ujung: elemen pertama dan terakhir butuh pengecualian (
:first-child/:last-child) agar tidak ada jarak melayang di tepi container. - Margin collapse: jarak vertikal antar kotak block yang memakai margin tidak selalu dijumlahkan — dibahas tuntas pada chapter Margin Collapse.
- Kurang peka arah:
margin-rightberarti “kanan”; saat arah penyusunan berubah, nilai itu ikut keliru dan aturan harus ditulis ulang.
gap: Satu Deklarasi #
gap bekerja pada container flex dan grid, dan hanya itu — justru itu kekuatannya:
.deret-tombol {
display: flex;
gap: 12px;
}Dua aturan pada pendekatan margin tergantikan satu baris, tanpa pembersihan :last-child — dan bila jarak antar item perlu diubah, versi gap cukup mengganti satu angka.
Perlu jujur soal batasnya: gap tidak berlaku pada layout block maupun inline biasa. Tidak ada mekanisme fallback — bila container bukan flex atau grid, deklarasi gap diabaikan begitu saja dan jaraknya tidak muncul. Kabar baiknya property ini didukung seluruh browser modern (untuk flexbox secara penuh sejak 2021; sebelum itu trik margin memang satu-satunya jalan), sehingga aman dipakai tanpa polyfill pada project baru.
row-gap dan column-gap #
gap adalah shorthand untuk dua property multi-sumbu: row-gap (jarak antar baris) dan column-gap (jarak antar kolom). Menulis gap: 12px berarti keduanya sama besar; menulis dua nilai berarti baris dan kolom bisa dibedakan:
.galeri-kartu {
display: flex;
flex-wrap: wrap;
row-gap: 24px; /* jarak antar baris hasil wrap */
column-gap: 12px; /* jarak antar item mendatar */
}Galeri kecil dengan lima kartu memaksa wrap sehingga kedua sumbunya terlihat:
Pada container grid, kedua sumbu ini bahkan lebih sering dipakai; kita bahas saat masuk section CSS Grid.
gap vs margin: Kapan Pakai yang Mana #
Keduanya tetap hidup berdampingan karena perannya berbeda:
| Kebutuhan | Pilihan |
|---|---|
| Jarak seragam antar item di dalam baris atau grid | gap |
| Jarak antara elemen dengan elemen di luarnya | margin |
| Jarak berbeda per sisi pada satu item tertentu | margin/padding |
| Jarak antar baris teks di dalam paragraf | line-height |
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
gap tidak bereaksi sama sekali | Container bukan flex atau grid; layout block mengabaikan gap | Jadikan container display: flex atau grid |
| Jarak tidak muncul di browser lama | Dukungan gap pada flexbox butuh versi terbaru | Periksa dukungan bila wajib mendukung browser lama; pola margin di atas adalah fallback klasiknya |
| Ruang kosong di ujung baris item | Masih memakai margin tanpa pengecualian :last-child | Pindahkan tanggung jawab jarak ke gap di container |
Ringkasan #
gap memberi jarak antar item di container flex dan grid dengan satu deklarasi — seragam, tanpa pembersihan ujung, tanpa jebakan margin collapse, dan multi-sumbu lewat row-gap/column-gap. Property ini tidak berlaku di layout block biasa, tetapi didukung penuh browser modern sehingga menjadi pilihan standar sejak 2021. Dengan alur, display, penyembunyian, scrolling, dan jarak sudah terbahas, tinggal satu konsep yang menjelaskan dua gejala paling lama di CSS: formatting context.