Display: Block, Inline, Inline-Block

Setiap elemen punya perilaku bawaan

Properti display menentukan bagaimana elemen "berperilaku" dalam aliran halaman. Tiga nilai klasiknya wajib dipahami sebelum belajar Flexbox dan Grid.

display: block

Elemen block selalu mulai di baris baru dan mengambil lebar penuh induknya secara default.

<div>, <p>, <h1> sampai <section> semuanya block. Kamu bisa mengatur width, height, margin, dan padding dengan bebas.

display: inline

Elemen inline mengalir dalam baris teks, tidak bikin baris baru, dan lebarnya mengikuti isi.

<span>, <a>, <strong> bawaannya inline. Batasannya: width, height, margin-top, dan margin-bottom tidak berpengaruh pada elemen inline. Inilah kenapa <span> yang diberi width: 200px tetap tidak melebar: perilakunya inline.

Padding kiri-kanan dan margin kiri-kanan masih berfungsi pada inline, tapi vertikalnya tidak menggeser baris.

display: inline-block

Jalan tengah: elemen tetap mengalir sebaris seperti inline, tapi bisa diatur width, height, dan margin vertikal seperti block.

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e0f2fe;
}

Badge, tombol kecil, dan label adalah kasus klasik inline-block. Sebelum Flexbox populer, ini cara standar bikin menu navigasi horizontal.

Mengubah display

Kamu bebas menimpa perilaku bawaan:

/* link yang berperilaku seperti tombol block */
a.tombol-besar {
  display: block;
  padding: 16px;
  text-align: center;
}

/* list item yang berjejer horizontal */
nav li {
  display: inline-block;
}

display: none vs visibility

.sembunyi-total {
  display: none; /* hilang total, tidak makan tempat */
}

.sembunyi-tapi-ada {
  visibility: hidden; /* tidak terlihat, tapi tempatnya tetap ada */
}

display: none menghapus elemen dari aliran layout seolah tidak pernah ada. visibility: hidden hanya menyembunyikannya secara visual. Pilih sesuai kebutuhan: mau tempatnya ikut hilang atau tetap dijaga.

Catatan teknis: elemen dengan display: none tidak bisa dianimasikan (tidak ada transisi dari "tidak ada" ke "ada"). Kalau butuh efek fade, pakai kombinasi opacity + visibility, jangan display.

Rangkuman

Block bikin baris baru dan full width, inline mengalir dalam teks tapi tidak bisa diatur ukurannya, inline-block gabungan keduanya. display: none menghapus dari layout, visibility: hidden hanya menyembunyikan visual. Nilai display modern seperti flex dan grid dibahas di modul tersendiri.