Dalam dunia desain web dan pengembangan front-end, istilah "display" adalah salah satu properti CSS yang paling fundamental dan sering digunakan. Properti ini memainkan peran krusial dalam menentukan bagaimana sebuah elemen HTML ditampilkan di halaman web dan bagaimana ia berinteraksi dengan elemen lain dalam hal tata letak dan ruang.
Properti display dalam CSS mengontrol perilaku rendering sebuah elemen. Setiap elemen HTML secara default memiliki nilai display tertentu. Nilai-nilai ini menentukan apakah elemen tersebut akan menjadi block-level, inline-level, atau kombinasi keduanya, serta bagaimana ia akan berpartisipasi dalam model tata letak seperti Flexbox atau Grid.
Ada berbagai nilai yang bisa diberikan pada properti display, namun beberapa yang paling sering ditemui dan penting untuk dipahami adalah:
Elemen dengan display: block; akan selalu memulai di baris baru dan mengambil lebar penuh dari wadahnya (parent element). Mereka juga menerima pengaturan width, height, margin, dan padding. Contoh elemen yang secara default adalah block-level antara lain <div>, <p>, <h1> sampai <h6>, dan <section>.
Ketika Anda mengatur display: block; pada elemen yang biasanya inline (seperti <span>), elemen tersebut akan bertindak seperti blok: ocupa ruang penuh dan memulai baris baru.
HTML:
<span>Ini adalah span</span>
CSS:
span {
display: block;
background-color: lightblue;
padding: 10px;
margin-bottom: 5px;
}
Elemen dengan display: inline; tidak memulai baris baru dan hanya mengambil ruang sebanyak yang dibutuhkan kontennya. Elemen inline tidak menerima pengaturan width dan height secara langsung. Pengaturan margin-top dan margin-bottom juga tidak akan berpengaruh. Contoh elemen inline bawaan adalah <span>, <a>, <strong>, dan <em>.
Jika Anda mengatur display: inline; pada elemen block, ia akan berperilaku seperti elemen inline, yaitu tidak memulai baris baru dan hanya menyesuaikan lebarnya dengan konten.
HTML:
<div>Ini adalah div yang diubah menjadi inline</div>
CSS:
div {
display: inline;
background-color: lightgreen;
padding: 5px;
margin-right: 5px;
}
Kombinasi dari kedua dunia. Elemen dengan display: inline-block; berperilaku seperti elemen inline dalam hal penempatan (tidak memulai baris baru, dan bisa ditempatkan berdampingan dengan elemen inline lainnya), namun mereka juga menerima pengaturan width, height, margin, dan padding seperti elemen block.
Ini sangat berguna ketika Anda ingin membuat elemen-elemen seperti tombol, kartu, atau item navigasi yang memiliki dimensi tetap tetapi ditempatkan secara horizontal.
HTML:
<div class="box">Box 1</div>
<div class="box">Box 2</div>
CSS:
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
margin: 10px;
text-align: center;
line-height: 100px; /* Untuk vertikal center */
}
Nilai display: none; secara efektif menyembunyikan elemen dari halaman web. Elemen tersebut tidak hanya tidak terlihat, tetapi juga dihapus dari alur dokumen (document flow), yang berarti ia tidak memakan ruang sama sekali dan tidak berinteraksi dengan elemen lain. Ini berbeda dengan `visibility: hidden;` yang membuat elemen tidak terlihat tetapi tetap memakan ruang.
Properti ini sering digunakan untuk menampilkan atau menyembunyikan elemen secara dinamis menggunakan JavaScript, misalnya untuk menu responsif atau modal.
HTML:
<p id="hidden-text">Teks ini disembunyikan</p>
CSS:
#hidden-text {
display: none;
}
Selain nilai-nilai dasar di atas, display juga menjadi kunci untuk mengaktifkan sistem tata letak modern CSS:
display: flex;: Mengubah elemen menjadi flex container. Ini memungkinkan Anda mengatur tata letak item-item di dalamnya dalam satu dimensi (baris atau kolom) dengan kontrol yang sangat presisi terhadap alignment, spacing, dan ordering. Sangat cocok untuk komponen seperti navigasi, form, atau layout satu baris.display: grid;: Mengubah elemen menjadi grid container. Ini memungkinkan Anda membuat tata letak dua dimensi (baris dan kolom) yang kompleks. Grid sangat ampuh untuk mengatur keseluruhan halaman atau bagian-bagian besar dari layout.Penggunaan flex dan grid telah merevolusi cara kita membangun tata letak web, membuatnya lebih efisien, responsif, dan mudah dikelola dibandingkan metode lama seperti float atau inline-block yang terkadang rumit.
Properti display adalah pondasi penting dalam membangun antarmuka pengguna yang efektif dan menarik. Dengan memahami berbagai nilai yang dimilikinya, mulai dari block, inline, inline-block, hingga kekuatan modern dari flex dan grid, Anda dapat mengendalikan bagaimana setiap elemen berperilaku dan berinteraksi di halaman web. Menguasai display berarti menguasai seni tata letak web.