Visualisasi berbagai tipe display dalam CSS.
Dalam dunia pengembangan web, khususnya saat berurusan dengan CSS (Cascading Style Sheets), istilah display artinya adalah salah satu properti yang paling fundamental dan sering digunakan. Properti display mengontrol bagaimana elemen HTML dirender (ditampilkan) di halaman web, menentukan perilaku spasial dan interaksi elemen tersebut dengan elemen lain di sekitarnya.
Setiap elemen HTML, secara default, memiliki nilai display bawaan yang ditetapkan oleh browser. Memahami nilai default ini adalah kunci untuk merancang tata letak (layout) yang responsif dan terstruktur. Tanpa mengontrol properti ini, membuat desain kompleks seperti navigasi horizontal, grid produk, atau bahkan penataan kolom akan menjadi sangat sulit.
Secara umum, nilai display terbagi menjadi beberapa kategori utama, yang masing-masing memiliki karakteristik berbeda dalam penggunaan ruang dan bagaimana mereka menerima properti seperti lebar (width), tinggi (height), margin, dan padding.
Untuk menjawab secara eksplisit apa arti display dalam konteks CSS, kita perlu melihat nilai-nilai utamanya:
Elemen dengan display: block selalu memulai baris baru dan mengambil lebar penuh yang tersedia dari induknya. Contoh elemen bawaan yang menggunakan nilai ini adalah `
`, `
Elemen dengan display: inline hanya mengambil ruang selebar konten yang dimilikinya. Mereka tidak memaksa baris baru dan akan mengalir berdampingan dengan elemen inline lainnya. Contohnya adalah `` (anchor/link), ``, dan ``. Kelemahan utama elemen inline adalah bahwa properti lebar (width) dan tinggi (height) tidak berlaku, dan margin vertikal (atas/bawah) diabaikan.
Ini adalah gabungan kekuatan dari kedua tipe di atas. Elemen dengan display: inline-block mengalir secara horizontal bersama elemen lain (seperti inline), namun mereka juga menerima pengaturan lebar, tinggi, serta margin/padding vertikal dan horizontal (seperti block). Ini sangat berguna saat Anda membutuhkan elemen untuk berderet namun tetap bisa dikontrol dimensinya.
Nilai ini membuat elemen tersebut benar-benar menghilang dari layout. Elemen tidak ditampilkan, dan tidak ada ruang yang dialokasikan untuknya. Ini sering digunakan dalam JavaScript untuk menyembunyikan atau menampilkan bagian halaman secara dinamis.
Dalam pengembangan web modern, properti display telah berevolusi untuk mendukung sistem layout yang jauh lebih kuat, terutama untuk desain responsif:
Ketika Anda menetapkan display: flex pada elemen kontainer, anak-anaknya (items) diatur dalam satu dimensi (baris atau kolom). Flexbox dirancang untuk mendistribusikan ruang secara efisien di sepanjang satu sumbu, mempermudah perataan (alignment), urutan, dan pemberian bobot pada item dalam tata letak. Ini adalah solusi utama untuk menata komponen seperti header, footer, atau menu navigasi.
Berbeda dengan Flexbox yang fokus pada satu dimensi, display: grid memungkinkan Anda mendefinisikan tata letak dua dimensi (baris dan kolom) secara bersamaan. Ini sangat kuat untuk membangun struktur utama halaman yang kompleks, memungkinkan kontrol presisi atas penempatan item di seluruh area grid yang telah didefinisikan.
Jadi, jika kita merangkum, display artinya adalah instruksi vital yang memberi tahu browser cara elemen berinteraksi dengan elemen lain di halaman, terutama dalam hal penggunaan ruang. Menguasai transisi antara block, inline, inline-block, hingga mengadopsi flex dan grid adalah langkah krusial untuk menguasai tata letak CSS, memastikan situs web Anda tidak hanya berfungsi tetapi juga terlihat profesional di perangkat mobile maupun desktop.