Display menentukan cara sebuah elemen menempati ruang: makan satu baris penuh, ikut sebaris dengan tetangganya, atau gak dapat tempat sama sekali. Visibility menentukan elemennya kelihatan atau gak. Di Tailwind, tiap nilai jadi satu class: block, inline-block, inline, hidden, invisible. Bayangin foto kelas. Kalau satu anak keluar dari barisan, teman-temannya merapat dan gak ada celah: itu hidden. Kalau dia tetap berdiri di barisan tapi pakai jubah gaib, dia gak kelihatan, tapi celahnya tetap ada di foto: itu invisible.
🧪 Tebakan cepat: tiga kotak berjajar: Terlihat, Hantu, dan Teman. Hantu dikasih class
invisible. Teman geser ke tempat Hantu gak? Tebak dulu, jawabannya ada di bagian "hiddenatauinvisible".
Tiga cara menempati ruang
Ini tiga kotak yang sama dengan yang ada di Lab. Ketiganya <div>, dan tiap kotak dikasih lebar w-20 (5rem = 80px) dan tinggi h-12 (3rem = 48px):
<div id="visible" class="inline-block w-20 h-12 bg-amber-200">Terlihat</div>
<div id="ghost" class="inline-block w-20 h-12 bg-sky-200">Hantu</div>
<div class="inline-block w-20 h-12 bg-emerald-200">Teman</div>
Class display di Terlihat bisa diganti, dan hasilnya beda:
| Class | CSS yang dihasilkan | Mulai di baris baru? | Ikut w-20 dan h-12? |
|---|---|---|---|
block |
display: block; |
ya, Hantu dan Teman turun ke bawahnya | ya |
inline-block |
display: inline-block; |
gak, sebaris dengan Hantu dan Teman | ya |
inline |
display: inline; |
gak, sebaris | gak, cuma selebar tulisannya |
<div>aslinyablock, makanya tiap div biasa mulai di baris baru.<span>aslinyainline.inline-blockadalah gabungan yang sering dicari: tetap sebaris seperti teks, tapi lebar dan tingginya bisa diatur. Di latihan,#visibledikasihinline-block.inlinemengabaikanw-*danh-*. Kalau kotakmu tiba-tiba mengecil jadi selebar tulisannya, cek apakah diainline.
hidden atau invisible
Dua-duanya bikin Hantu gak kelihatan, tapi caranya beda:
| Hantu pakai | CSS yang dihasilkan | Baris yang tampil |
|---|---|---|
| (gak ada) | Terlihat, Hantu, Teman | |
hidden |
display: none; |
Terlihat, Teman (Teman merapat) |
invisible |
visibility: hidden; |
Terlihat, celah 80px, Teman |
hiddenmencopot elemen dari layout. Gak kelihatan, gak makan tempat, dan tetangganya merapat.invisiblecuma bikin elemennya gak kelihatan. Tempatnya tetap dijaga, jadi Teman gak geser. Itu jawaban tebakannya: gak geser.
Di latihan, Hantu harus invisible:
<div id="visible" class="inline-block">Terlihat</div>
<div id="ghost" class="invisible">Hantu</div>
invisible berguna kalau layout gak boleh loncat, misalnya tempat pesan error yang belum muncul. hidden dipakai kalau elemennya memang gak boleh makan tempat, misalnya menu dropdown yang lagi tertutup.
📌 opacity-0: transparan, tapi masih ada
opacity-50 menghasilkan opacity: 50% (setengah transparan), dan opacity-0 menghasilkan opacity: 0%. Dengan opacity-0, elemen gak kelihatan dan tempatnya tetap ada, mirip invisible. Bedanya, elemen opacity-0 masih bisa diklik dan difokus. Tombol opacity-0 itu tombol gaib yang tetap menangkap klik. Pakai opacity-* buat efek memudar, dan invisible atau hidden kalau elemennya memang harus pergi.
⚠️ Jebakan yang sering ketemu
hiddendaninvisibleketuker. Latihannya mengecekvisibility: hiddendi#ghost. Itu dariinvisible.hiddenmenghasilkandisplay: none, jadi gak lolos.inlineuntuk kotak yang butuh ukuran.inlinemengabaikan lebar dan tinggi. Latihannya mengecekdisplay: inline-blockdi#visible, jadi tulisinline-blocklengkap.- Dua class display sekaligus.
class="inline-block hidden"bikin dua aturan berebutdisplay. Yang menang ditentukan urutan CSS buatan Tailwind, bukan urutan kamu menulisnya. Pilih satu saja. visiblebukan lawanhidden.visiblemenghasilkanvisibility: visible, lawannyainvisible. Buat memunculkan lagi elemen yanghidden, ganti dengan class display lain, misalnyablock.
TL;DR: block mulai di baris baru dan ikut lebar-tinggi, inline sebaris tapi mengabaikan lebar-tinggi, inline-block sebaris dan tetap ikut lebar-tinggi. hidden (display: none) mencopot elemen dari layout, jadi tetangganya merapat. invisible (visibility: hidden) cuma menyembunyikan, tempatnya tetap ada. opacity-0 juga menjaga tempatnya dan masih bisa diklik. Di latihan: #visible pakai inline-block, #ghost pakai invisible.
