Inline-Block

Ada kebutuhan yang tidak dijawab dua nilai dasar: beberapa elemen harus berjajar seperti teks, tetapi masing-masing juga perlu menerima ukuran dan padding penuh. Tautan menu yang diberi padding besar, lencana status, atau pasangan ikon plus label — semuanya akan kehilangan bentuk bila dipaksa inline, dan semua turun baris bila dipaksa block. Nilai inline-block adalah jawaban klasik untuk kebutuhan itu, dan hingga kini masih dipakai untuk komponen kecil.

Perilaku Hybrid #

inline-block mengambil yang terbaik dari kedua dunia, dan tabel ini memperlihatkan posisinya:

Aspek	block	inline	inline-block
Posisi dalam alur	Baris sendiri	Di dalam aliran teks	Di dalam aliran teks
`width` dan `height`	Berlaku	Diabaikan	Berlaku
`margin`/`padding` empat sisi	Berlaku	Sebagian (lihat chapter sebelumnya)	Berlaku
Patah baris saat ruang habis	Kotak berikut turun	Teks patah	Kotak berikut turun ke baris teks baru

css
.lencana-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  background-color: #e7f4ec;
  border: 1px solid #1f6f54;
}

Beberapa lencana dari rule di atas disandingkan dalam satu baris teks — salah satunya diberi width agar hak ukuran block-nya terlihat:

Kegunaan Klasik #

Tiga pola yang secara historis dibangun di atas inline-block:

Menu navigasi pra-flexbox: elemen a dijadikan inline-block dengan padding besar sehingga terasa seperti tombol, lalu deretannya disusun mendatar oleh alur teks.
Lencana dan chip: badge status seperti contoh di atas, yang perlu bentuk pil tetap mengalir dalam teks.
Ikon plus label: gambar ikon kecil dijadikan inline-block agar menerima width/height sekaligus menyatu dengan teks di sebelahnya.

Karena elemen inline-block masih ikut serta dalam baris teks, property vertical-align juga berlaku padanya — property yang berguna untuk menyelaraskan tinggi item yang tidak seragam, misalnya vertical-align: middle.

Jebakan Spasi Antar Elemen #

Ini gotcha paling terkenal dari inline-block. Markup HTML yang ditulis berbaris-baris memuat newline dan indentasi di antara elemen, dan proses normalisasi spasi HTML mengubahnya menjadi satu karakter spasi yang benar-benar dirender. Karena elemen inline-block mengalir seperti teks, spasi itu tampak sebagai celah yang tidak ada sumbernya di CSS.

html
<!-- newline di antara elemen dirender sebagai satu spasi -->
<button class="tombol-filter" type="button">Semua</button>
<button class="tombol-filter" type="button">Arabika</button>
<button class="tombol-filter" type="button">Robusta</button>

Ada tiga perbaikan yang lazim, masing-masing dengan konsekuensinya:

Perbaikan	Caranya	Konsekuensi
Sambungkan markup	Tulis `</button><button>` tanpa newline	Valid, tetapi menyulitkan pembacaan dan diff
`font-size: 0` pada induk	Celah mengecil karena ukurannya ikut font-size induk; kembalikan font-size pada anak	Perlu satu deklarasi tambahan di tiap level anak
Beralih ke flexbox	Container `display: flex` mengabaikan spasi teks	Solusi modern; dibahas tuntas di section Flexbox

Demo berikut memakai markup yang sama persis — yang berbeda hanya ada atau tidaknya newline antar elemen:

Celah antar elemen itu bukan bug, melainkan satu karakter spasi hasil normalisasi HTML yang dirender pada font-size induk — perilaku aliran teks yang bekerja seperti mestinya.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
Celah antar elemen tanpa ada margin	Spasi HTML antar elemen dirender sebagai satu spasi	Sambungkan markup, pakai trik `font-size: 0`, atau beralih ke flexbox
Item terakhir turun ke baris bawah	Total lebar item ditambah celah spasi melebihi container	Kurangi padding, sambungkan markup, atau pakai flexbox dengan `flex-wrap`
Tinggi item sejajar tidak seragam tampak miring	`vertical-align` default-nya baseline	Tambahkan `vertical-align: middle` atau `top` pada item

Ringkasan #

inline-block mengalirkan elemen di dalam teks seperti inline, tetapi memberinya seluruh hak kotak block: ukuran, margin, dan padding empat sisi. Nilai ini menopang banyak pola klasik seperti menu pra-flexbox dan lencana, dengan satu jebakan besar berupa celah dari spasi HTML yang kini paling praktis diselesaikan dengan flexbox. Dari menyembunyikan dan menampilkan, langkah kita berikutnya masuk ke kebalikan menata: menghapus elemen dari halaman dengan display: none.