display menentukan cara sebuah elemen menempati halaman: makan satu baris penuh, ikut mengalir di dalam baris teks, atau gak tampil sama sekali. Tiap tag sudah punya nilai bawaan. <div>, <p>, <h1> dan <li> itu block, sedangkan <span>, <a> dan <strong> itu inline.
🧪 Tebakan cepat: sebuah
<span>diberiwidth: 120px. Lebarnya berubah jadi 120px? Tebak dulu, jawabannya ada di bagian "block, inline dan inline-block".
block, inline dan inline-block
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<style>
.item {
display: inline-block;
width: 120px;
height: 44px;
background: lightblue;
}
</style>
.itemadalah selector: aturan di dalam{ }berlaku buat ketiga elemen denganclass="item".display: inline-blockmengganti perilaku bawaan<div>(yang tadinyablock).width: 120pxdanheight: 44pxadalah ukuran tiap kotak.
Hasilnya, tiga kotak biru 120 × 44px berjejer ke samping. Coba bandingkan tiga nilainya:
block: elemen makan satu baris penuh, jadi yang berikutnya turun ke baris baru.widthdanheightdipakai. Denganblock, ketiga kotak tadi tersusun ke bawah.inline: elemen ikut mengalir di dalam baris, selebar isinya saja.widthdanheightdiabaikan, begitu juga margin atas-bawah. Denganinline, kotaknya mengecil seukuran huruf A, B, C.inline-block: berjejer ke samping kayakinline, tapiwidth,heightdan padding tetap dipakai kayakblock.
Jawaban tebakan: gak berubah. <span> itu inline, jadi width dan height-nya diabaikan. Ubah dulu jadi display: inline-block atau block.
Ini juga cara bikin menu ke samping. Item daftar <li> bawaannya block, jadi tersusun ke bawah. Dengan display: inline-block, item-itemnya berjejer, dan padding-nya tetap rapi.
Menyembunyikan dengan display: none
.iklan {
display: none;
}
display: none bikin elemen hilang total, seolah gak ada di halaman. Tempatnya langsung diisi elemen di bawahnya, dan screen reader (program yang membacakan halaman buat pengguna tunanetra) juga gak membacanya. .iklan ditulis pakai titik karena itu class.
Beda dengan visibility: hidden: elemennya juga gak kelihatan, tapi tempatnya tetap dipesan, jadi ada ruang kosong seukuran elemen itu.
Nilai buat induk: flex
.menu {
display: flex;
}
Nilai di atas mengatur elemennya sendiri. display: flex beda: dipasang di induk, lalu semua anaknya otomatis tersusun dalam satu baris, dan bisa diatur jadi kolom. Nilainya flex, bukan flexbox. Ada juga display: grid buat susunan baris dan kolom sekaligus. Dua-duanya punya lesson sendiri.
⚠️ Jebakan yang sering ketemu
- Lupa titik di depan class.
rahasia { display: none; }mencari tag<rahasia>, bukanclass="rahasia". Tulis.rahasia. - Celah kecil di antara inline-block. Spasi atau enter di antara tag HTML ikut tampil sebagai celah kecil, kayak spasi di antara kata.
- Salah ketik nilainya.
display: inline block(tanpa tanda hubung) ataudisplay: hiddengak dikenal, jadi diabaikan diam-diam.
TL;DR: display menentukan cara elemen menempati halaman. block makan satu baris penuh dan menerima width/height. inline mengalir di baris teks dan mengabaikan width/height. inline-block berjejer tapi tetap menerima ukuran, cocok buat menu ke samping. none menghilangkan elemen beserta tempatnya, sedangkan visibility: hidden menyisakan ruang kosong. display: flex di induk menyusun anak-anaknya dalam satu baris.
