Display: Kunci Mengatur Baris
Pernah membuat dua tombol <button> tapi mereka berjejer
ke samping, sedangkan dua paragraf <p> malah selalu
menumpuk ke bawah?
Itu semua karena sifat bawaan elemen HTML yang disebut Display. Memahami properti display adalah kunci untuk menyusun
layout website agar rapi dan tidak berantakan. Mari berkenalan dengan 4 macam display paling dasar di CSS.
🧱 1. Block (Si Egois)
Elemen dengan display: block; sifatnya
"egois". Ia akan selalu memulai baris baru dan melebar secara maksimal memenuhi 100% lebar kontainernya (dari
ujung kiri layar ke ujung kanan), menendang elemen lain ke baris bawahnya.
Contoh Visual <div> dan <p>
Tag HTML bawaan `block`:
<div>(Pembungkus)<p>(Paragraf)<h1>sampai<h6>(Heading)<ul>,<ol>,<li>(List)
Sifat Khusus `block`:
- Bisa diatur lebarnya (
width) - Bisa diatur tingginya (
height) - Bisa diberi margin dan padding dari segala arah dengan sempurna.
🤝 2. Inline (Si Mengalir)
Elemen dengan display: inline; sifatnya
seperti air yang mengalir dalam teks. Ia tidak akan memulai baris baru dan hanya akan memakan
lebar selebar isi kontennya saja. Jika teksnya habis, barulah ia turun ke bawah (word-wrap).
Contoh Visual <span> dan <a>
Tag HTML bawaan `inline`:
<span>(Pembungkus teks)<a>(Link Anchor)<strong>,<em>
⚠️ Kelemahan `inline`:
- Tidak bisa diubah
widthdanheightnya. Besarnya akan dipaksa mengikuti isinya. - Margin atas/bawah tidak akan sepenuhnya mendorong elemen lain.
🌟 3. Inline-Block (The Best of Both Worlds)
Kadang kita ingin elemen berdampingan ke samping (seperti inline), TAPI kita juga ingin bisa mengatur
lebar dan tingginya secara bebas (seperti block). Itulah fungsi display: inline-block;.
Contoh Visual (Membuat Jejeran Kotak)
width: 120px
width: 120px
height: 70px
.kotak-menu {
display: inline-block;
width: 120px;
/* Kotak akan berjejer tapi width/height tetap jalan! */
}
Contoh elemen bawaan: <img> dan <button> biasanya bertindak seperti
inline-block.
👻 4. None (Menghilang Tanpa Jejak)
Jika kamu memberikan display: none; pada
sebuah elemen, ia akan menghilang 100% dari halaman layaknya tidak pernah ada di HTML kamu.
Bedanya dengan transparent/hidden:
visibility: hidden; hanya membuatnya
transparan/tidak terlihat, tapi *tempatnya masih terisi oleh elemen tersebut secara fisik*. Sedangkan `display:
none` benar-benar menghapus ruang fisiknya di layar.
🎮 Playground: Perbandingan Display
Klik setiap opsi di bawah ini untuk melihat bagaimana properti display mempengaruhi 3 kotak berwarna pink!
display:
width: 100px;
height: 50px;
margin: 10px;
}