Coba bayangin display itu kayak DNA elemen — nentuin perilaku dasar dia di halaman. Mau berdiri sendiri makan satu baris penuh? Atau nempel-nempelin sama elemen lain di kalimat? Atau hilang total dari layar? Properti display ngatur semua itu. Ini bukan properti style biasa — ini properti yang nentuin bagaimana elemen "berada" di dunia layout.

💡 Pertaruhan terbesar pemula CSS. Kebanyakan masalah layout aneh ("kenapa width aku gak jalan?") berakar di salah paham display. Inline element gak respect width/height, block selalu pindah baris baru — paham aturan default ini = 80% bug layout selesai sendiri.

Nilai display yang umum:

• block — elemen mengambil seluruh lebar, membuat baris baru (div, p, h1)
• inline — elemen hanya selebar kontennya, tidak buat baris baru (span, a, strong)
• inline-block — seperti inline tapi bisa diatur width/height
• none — elemen tidak ditampilkan sama sekali (tersembunyi)

Ada juga display: flex dan display: grid — keduanya mengaktifkan sistem layout yang lebih canggih. Kita akan pelajari di lesson Flexbox dan Grid tersendiri; untuk sekarang fokus ke 4 nilai di atas.

/* Mengubah span menjadi block */
span {
  display: block;
  width: 200px;
  height: 50px;
  background: lightblue;
}

/* Membuat list horizontal */
li {
  display: inline-block;
  padding: 10px 20px;
}

/* Menyembunyikan elemen */
.tersembunyi {
  display: none;
}

🎭 Analogi sehari-hari

display itu kayak cara nata barang di kamar. block = lemari gede yang berdiri sendiri makan satu sisi tembok penuh — gak ada yang bisa nyempil di sebelahnya. inline = pernak-pernik di rak buku yang bersebar mengalir kanan-kiri sesuai muat. display: none = barangnya dimasukin gudang, hilang dari kamar total (orang lain ngisi spotnya). visibility: hidden mirip tapi spotnya tetep ditahan kosong, kayak kursi yang di-reserve. flex/grid = sistem rak rapi yang bakal kamu pelajari lesson selanjutnya — game changer banget.

⚠️ Jebakan yang sering ditemui

• display: none vs visibility: hidden vs opacity: 0: none hilang total, hidden invisible tapi tetap makan tempat, opacity: 0 invisible + clickable + makan tempat.
• display: none REMOVE dari accessibility tree — screen reader skip. Mau hide visual saja? Pakai .sr-only class.
• Animation FROM/TO display: none tidak smooth — dulu tidak bisa. Modern: display interpolate dengan @starting-style.
• Inline element dengan width diabaikan — ubah inline-block atau block.
• display: contents = elemen "menghilang" tapi child tetap render — useful untuk grid/flex restructure.
• <button> default inline-block, <div> block, <span> inline. Sering perlu override.

🎯 Mau "sembunyikan" elemen — pilih cara mana?

• Hilang total + spotnya diisi tetangga → display: none (juga remove dari accessibility tree)
• Invisible tapi spot tetap dipertahanin → visibility: hidden (kursi reserved)
• Invisible + spot tetap + masih bisa diklik → opacity: 0 (rare use case)
• Hide visual tapi screen reader tetep baca (a11y) → CSS class .sr-only (clip + position)
• Hide untuk SCREEN READER doang → aria-hidden="true"

Salah pilih = bug a11y atau layout shift aneh. display: none paling sering, tapi kalau elemen perlu animate masuk-keluar, pakai opacity + visibility.

TL;DR: display = nentuin perilaku dasar elemen di layout. block (makan baris penuh, bisa width/height — <div>/<p>), inline (mengalir di teks, abaikan width/height — <span>/<a>), inline-block (inline tapi terima width/height — <button>), flex (1D layout), grid (2D layout), none (hilang total + dari accessibility tree). Hide dengan animate: pakai opacity + visibility, bukan display: none. display: contents = elemen menghilang tapi child tetep render.