Inline-block

Kadang kita membutuhkan kotak yang mengikuti aliran teks seperti elemen inline, tetapi juga menerima width, height, dan margin secara penuh seperti elemen block. Badge label, item navigasi, dan gambar kecil berjajar adalah contoh kebutuhan tersebut. Nilai display: inline-block dirancang persis untuk posisi antara dua tipe itu: di luar ia berperilaku inline, di dalam ia berperilaku block. Pada Chapter ini kita membiasakan diri dengan tipe hibrida ini sekaligus membongkar jebakan whitespace yang terkenal darinya.

Kotak Hibrida: Aliran Inline, Ukuran Penuh #

Elemen inline-block diletakkan browser sebagai kotak inline: ia berdampingan dengan elemen lain di dalam baris, mengikuti arah teks, dan pindah baris bersama teks ketika ruang habis. Namun bagian dalam kotaknya diatur seperti block, sehingga:

• width dan height berlaku;
• margin dan padding berlaku pada keempat sisi;
• tanpa width, lebar kotak menyesuaikan isinya — keunggulan dibanding block yang meregang penuh.

Satu detail perataan patut dikenali sejak awal: kotak inline-block duduk di garis dasar (baseline) baris teks. Kotak yang berisi teks menyelaraskan teks terakhirnya dengan baseline, sedangkan kotak tanpa teks duduk pada tepi bawah margin-nya — perbedaan kecil inilah yang membuat dua kotak inline-block tampak tidak sejajar. Solusi paling ringkas adalah vertical-align: top pada semua kotak dalam satu deret.

Dokumentasi nilainya ada pada MDN: display . Sebagai gambaran cepat: inline-block memenuhi seluruh kolom “berlaku” pada tabel Chapter Block dan Inline , sambil tetap tidak memulai baris baru.

Kasus Klasik: Badge dan Deret Kotak #

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    .badge {
      display: inline-block;
      width: 120px;
      height: 36px;
      line-height: 36px; /* menyamakan tinggi baris dengan tinggi kotak */
      text-align: center;
      border-radius: 9999px;
      background: rgb(14, 165, 233);
      color: rgb(255, 255, 255);
      font-size: 14px;
    }
    .kotak { display: inline-block; width: 70px; height: 56px; background: rgb(196, 181, 253); }
    .deret { width: 215px; outline: 2px dashed rgb(148, 163, 184); margin-top: 8px; }
  </style>
</head>
<body>
  <p>
    <span class="badge" id="badge-utama">Baru</span>
    <span class="badge">Promo</span>
  </p>
  <div class="deret">
    <span class="kotak"></span>
    <span class="kotak"></span>
    <span class="kotak"></span>
  </div>
</body>
</html>

Hasil di Browser:

Dua badge pil tampil berdampingan mengikuti aliran teks; badge utama
memiliki computed display: inline-block dengan width 120px dan
height 36px.
Pada deret dengan whitespace (3 kotak × 70px dalam wadah 215px), kotak
ketiga turun ke baris kedua karena 210px kotak + dua karakter spasi
(sekitar 10px) melebihi lebar wadah. Nilai computed kotak pertama:
display inline-block, width 70px.

Mari kita bedah bagian yang menentukan:

1. Baris 5–13 (.badge): badge diberi display: inline-block, lalu ukuran tetap 120×36px. Nilai line-height: 36px menyamakan tinggi baris teks dengan tinggi kotak sehingga label terlihat vertikal di tengah — pola yang lazim untuk tombol dan badge berukuran tetap.
2. Baris 14 (.kotak): kotak ungu 70×56px juga inline-block; tanpa width pun kotak ini tetap berfungsi karena lebar menyesuaikan isi.
3. Baris 16–20 (HTML): perhatikan setiap span ditulis pada baris sendiri. Baris baru di HTML menghasilkan satu karakter spasi — dan spasi inilah sumber jebakan pada bagian berikutnya.

Jebakan Whitespace Antar Elemen #

Karena inline-block adalah kotak inline, whitespace di antara dua elemen pada HTML (spasi, tab, atau baris baru) dirender sebagai satu karakter spasi. Lebar karakter spasi bergantung font — pada font sistem 16px sekitar 5px. Gap ini bukan margin, sehingga tidak bisa dihapus dengan margin: 0, dan kadang membuat total lebar deret melebihi perhitungan.

Ada tiga solusi umum:

<!-- Solusi 1: komentar HTML menyatukan penutup dan pembuka -->
<span class="kotak"></span><!--
--><span class="kotak"></span>

<!-- Solusi 2: font-size: 0 pada wadah, anak disetel ulang -->
<div class="deret" style="font-size: 0">
  <span class="kotak" style="font-size: 16px"></span>
  <span class="kotak" style="font-size: 16px"></span>
</div>

<!-- Solusi 3 (modern): flexbox, whitespace tidak membentuk kotak -->
<div class="deret" style="display: flex">
  <span class="kotak"></span>
  <span class="kotak"></span>
</div>

Demo pada chapter ini menampilkan efeknya secara visual: deret dengan whitespace membuat kotak ketiga turun baris di wadah 215px, sedangkan versi komentar HTML dan versi flexbox muat dalam satu baris (total 210px). Untuk layout baru, flexbox adalah pilihan paling bersih — whitespace antar item tidak membentuk kotak apa pun, dan pembahasan lengkapnya menanti pada Section Flexbox .

Posisi Inline-block di Antara Keduanya #

Dengan tabel ini, kita kini memiliki kendali penuh atas tiga tipe kotak dasar. Bab berikutnya membahas cara menyingkirkan elemen dari layar sepenuhnya: display: none.