Display CSS: Mengontrol Cara Elemen Ditampilkan
Apa Itu Properti display?
Properti display dalam CSS digunakan untuk mengontrol bagaimana sebuah elemen HTML ditampilkan di halaman web. Setiap elemen memiliki nilai display bawaan, seperti <div> yang secara default memiliki display: block, sedangkan <span> memiliki display: inline.
Dengan memahami dan memanipulasi properti display, kita bisa:
- Mengubah tampilan elemen sesuai kebutuhan layout.
- Membuat elemen muncul atau hilang dari halaman.
- Mengatur interaksi antar elemen secara visual.
1. Nilai Umum dari display
Berikut beberapa nilai utama dari properti display:
| Nilai | Deskripsi |
|---|---|
| block | Elemen ditampilkan sebagai blok (mengambil seluruh lebar) |
| inline | Elemen ditampilkan sejajar dengan teks dan elemen lain |
| inline-block | Seperti inline, tapi bisa mengatur lebar dan tinggi |
| none | Elemen tidak ditampilkan sama sekali (hilang dari halaman) |
| flex | Elemen menjadi flex container, membentuk layout fleksibel |
| grid | Elemen menjadi grid container, membentuk layout dua dimensi |
| table, table-row, table-cell | Meniru struktur tabel |
2. display: block; – Tampil Sebagai Blok
Elemen dengan display: block akan:
- Mengambil seluruh lebar yang tersedia.
- Memaksa elemen berikutnya turun baris (new line).
Contoh elemen bawaan: <div>, <p>, <h1> sampai <h6>, <header>, <footer>, dll.
Contoh penggunaan:
.block {
display: block;
}
3. display: inline; – Tampil Sejajar
Elemen dengan display: inline hanya menempati ruang yang dibutuhkan oleh kontennya dan tidak membuat baris baru.
Contoh elemen bawaan: <span>, <a>, <strong>, <em>, dll.
Contoh:
.inline {
display: inline;
}
💡 Anda tidak bisa mengatur lebar (width) atau tinggi (height) pada elemen inline.
4. display: inline-block; – Gabungan Inline dan Block
Mirip dengan inline, tetapi memungkinkan pengaturan lebar dan tinggi.
Contoh:
.inline-block {
display: inline-block;
width: 100px;
height: 30px;
}
Sering digunakan untuk:
- Tombol dalam satu baris.
- Ikon bersama teks.
- Menu horizontal sederhana.
5. display: none; – Elemen Tidak Ditampilkan
Digunakan untuk menyembunyikan elemen sepenuhnya dari halaman — elemen tersebut tidak akan terlihat maupun memakan ruang.
Contoh:
.hidden {
display: none;
}
⚠️ Untuk menyembunyikan elemen tanpa menghilangkan ruangnya, gunakan visibility: hidden;.
6. display: flex; – Layout Fleksibel Satu Dimensi
Ketika kita memberi display: flex pada sebuah elemen, elemen tersebut menjadi Flex Container, dan anak-anaknya menjadi Flex Items.
Contoh:
.flex-container {
display: flex;
gap: 10px;
}
Cocok digunakan untuk:
- Navbar
- Card layout
- Form input
- Tombol grup
7. display: grid; – Layout Dua Dimensi yang Kuat
Dengan display: grid, elemen induk menjadi Grid Container, dan kita bisa mengatur kolom, baris, jarak, dan posisi item secara presisi.
Contoh:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Cocok digunakan untuk:
- Dashboard
- Galeri gambar
- Tata letak majalah
8. display: table; dan Turunannya – Meniru Struktur Tabel
CSS juga mendukung penampilan seperti tabel menggunakan properti berikut:
| Nilai | Deskripsi |
|---|---|
| display: table; | Seperti tag <table> |
| display: table-row; | Seperti tag <tr> |
| display: table-cell; | Seperti tag <td> atau <th> |
| display: table-caption; | Seperti tag <caption> |
Contoh:
.tabel {
display: table;
width: 100%;
}
.baris {
display: table-row;
}
.sel {
display: table-cell;
padding: 10px;
border: 1px solid #ccc;
}
9. Menggunakan display untuk Responsif dan Interaktivitas
Properti display sering digunakan bersama media queries atau JavaScript untuk:
- Menyembunyikan/menampilkan elemen pada ukuran layar tertentu.
- Membuat menu responsif (seperti mobile nav).
- Membuat komponen seperti modal, dropdown, tab, dsb.
Contoh: Menyembunyikan tombol pada layar kecil
.btn-special {
display: block;
}
@media screen and (max-width: 768px) {
.btn-special {
display: none;
}
}
10. Contoh Praktis
a. Navbar Horizontal Sederhana
HTML
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS
.navbar {
display: flex;
list-style: none;
padding: 0;
gap: 20px;
background-color: #f0f0f0;
padding: 10px;
}
b. Menyembunyikan Elemen Saat Di-print
CSS
@media print {
.no-print {
display: none;
}
}
Tips dan Trik Efektif
- Gunakan display: none; untuk menyembunyikan elemen sepenuhnya.
- Gunakan display: flex; atau display: grid; untuk layout modern dan responsif.
- Gunakan display: inline-block; jika ingin mengatur lebar/tinggi pada elemen inline.
- Uji perubahan display di browser developer tools untuk melihat efeknya.
- Hindari mengganti display dari block ke inline pada elemen kompleks karena bisa merusak layout.
Kesimpulan
Properti display adalah salah satu alat paling penting dalam CSS untuk mengontrol bagaimana elemen ditampilkan di halaman web. Dengan memahami nilai-nilainya seperti block, inline, flex, grid, dan none, Anda bisa mengatur layout, menyembunyikan elemen, atau membuat desain yang dinamis dan responsif.
Selanjutnya, kita akan membahas Pseudo-Classes CSS, yaitu cara menargetkan elemen berdasarkan state dan interaksi pengguna.
💡 Tips Praktis
- Gunakan display: none; untuk elemen yang benar-benar harus disembunyikan.
- Gunakan display: flex; untuk layout satu dimensi yang mudah diatur.
- Gunakan display: grid; untuk layout dua dimensi yang kompleks.
- Simpan variasi display dalam kelas terpisah agar mudah digunakan ulang.
