Display CSS adalah properti yang menentukan bagaimana elemen HTML harus ditampilkan di halaman web.

Properti ini memungkinkan kamu mengontrol layout dan perilaku elemen, seperti apakah elemen harus ditampilkan sebagai blok, sejajar dengan elemen lain, atau bahkan tidak ditampilkan sama sekali.

Di artikel ini, kita akan menjelajahi berbagai aspek dari display CSS, mulai dari konsep dasar sampai teknik-teknik lanjutan yang diperlukan untuk meningkatkan pengalaman pengguna. Selamat membaca!

Values di Properti Display CSS

Properti display CSS memiliki berbagai values yang untuk mengubah tampilan elemen. Properti ini akan memudahkan dalam mengatur layout halaman web:

Syntax Dasar Display CSS

Syntax adalah aturan dasar penulisan yang membantu browser memahami cara menampilkan elemen sesuai keinginan. Berikut syntax dasar untuk properti display CSS:

• selector: bagian ini merupakan menentukan elemen HTML mana yang akan kamu atur tampilannya.
• value: bagian ini adalah value dari properti display yang ingin kamu gunakan, seperti block, inline, flex, dll.

Display CSS: Inline

Tipe display inline membuat elemen ditampilkan sejajar dengan elemen lain atau dengan teks di sekitarnya, tanpa memulai baris baru. Menggunakan tipe display ini berguna saat kamu ingin mengatur style untuk bagian tertentu dari teks atau elemen, tapi tidak ingin mengubah layout keseluruhan halaman web.

Beberapa tag seperti < span > juga menggunakan display inline sebagai default.

Karakteristik utama dari display inline adalah:

• Lebar dan tinggi: elemen dengan tipe display inline tidak bisa mengatur lebar dan tinggi. Lebar dan tinggi elemen akan otomatis disesuaikan dengan kontennya.
• Margin dan padding: elemen inline bisa memiliki margin dan padding, tetapi hanya pada sisi kiri dan kanan, bukan atas dan bawah.
• Baris baru: elemen inline tidak memulai baris baru pada halaman, sehingga elemen lain dapat diletakkan di sebelahnya.

Salah satu contoh elemen HTML yang secara default memiliki tipe display inline adalah elemen span. Berikut contoh penggunaannya:

Dalam contoh di atas, elemen span dipakai untuk mengubah warna teks menjadi merah, tanpa mengubah struktur atau layout dari paragraf tersebut. Elemen span tetap berada dalam baris yang sama dengan teks lain di sekitarnya.

Display CSS: Block

Tipe display CSS: block akan selalu memulai baris baru dan mengambil seluruh lebar yang tersedia pada container parent-nya. Tipe display ini berfungsi ketika kamu ingin membuat struktur layout halaman web, seperti pembagian kolom, header, dan footer.

Hampir semua tag di HTML mempunyai display block sebagai default display-nya.

Berikut beberapa karakteristik dari tipe display block:

• Lebar dan tinggi: elemen block bisa mengatur lebar dan tinggi secara eksplisit. Jika tidak diatur, lebar elemen akan mengisi seluruh lebar container, sedangkan tingginya disesuaikan dengan konten di dalamnya.
• Margin dan padding: elemen block dapat memiliki margin dan padding di semua sisi, termasuk atas dan bawah.
• Baris baru: Elemen block selalu memulai baris baru, sehingga elemen lain tidak bisa diletakkan di sebelahnya pada baris yang sama.

Elemen HTML yang secara default merupakan tipe display block adalah div. Berikut contoh penggunaan elemen div sebagai tipe display block.

Kamu menggunakan elemen div untuk membuat blok dengan background biru muda dan padding di sekelilingnya. Elemen div akan mengambil seluruh lebar yang tersedia dan memulai baris baru pada halaman web.

Display CSS: Inline-Block

Tipe display inline-block dalam CSS adalah kombinasi unik dari karakteristik tipe inline dan block. Tipe ini memungkinkan elemen untuk diletakkan sejajar dengan elemen lain (seperti inline), namun tetap bisa mengatur lebar dan tinggi secara eksplisit (seperti block).

Berikut adalah beberapa karakteristik dari tipe display "inline-block":

• Lebar dan tinggi: berbeda dengan inline, elemen ini dapat mengatur lebar dan tinggi secara eksplisit.
• Margin dan padding: Elemen inline-block bisa saja memiliki margin dan padding di semua sisi.
• Baris baru: seperti inline, elemen ini tidak memulai baris baru dan dapat diletakkan sejajar dengan elemen lain pada baris yang sama.

Sebagai contoh, kamu memiliki dua elemen div dengan tipe display inline-block. Kedua elemen ini akan diletakkan sejajar dalam satu baris, namun dengan lebar, tinggi, dan warna background yang berbeda.

Display CSS: None

Tipe display CSS: none memiliki fungsi yang sangat spesifik, yaitu menyembunyikan elemen dari halaman web. Ketika kamu mengatur nilai display suatu elemen menjadi none, elemen tersebut tidak akan terlihat oleh audiens dan tidak akan memakan tempat di layout halaman, seolah-olah elemen tersebut benar-benar dihapus dari DOM.

Ada beberapa kasus di mana kamu mungkin perlu menggunakan tipe display none:

• Konten kondisional: kamu mungkin memiliki konten yang hanya ingin ditampilkan dalam kondisi tertentu, misalnya pesan kesalahan atau informasi tambahan yang hanya perlu ditampilkan ketika audiens mengeklik tombol tertentu.
• Responsive design: pada desain yang responsif, beberapa elemen mungkin perlu disembunyikan di ukuran layar tertentu untuk meningkatkan pengalaman pengguna, misalnya menyembunyikan gambar besar atau teks tambahan pada tampilan mobile.
• Pengaturan layout: dalam beberapa kasus, kamu mungkin ingin sementara menyembunyikan elemen tanpa menghapusnya dari kode, misalnya saat melakukan testing atau debugging.

Contohnya, elemen dengan ID "elemenRahasia" akan disembunyikan dari tampilan halaman web.

FAQ (Frequently Asked Question)

Apakah bisa menggabungkan value display, seperti menggunakan inline-flex atau inline-grid?

Kamu bisa menggunakan value seperti inline-flex atau inline-grid untuk membuat container flex atau grid yang juga bersifat inline, yaitu dapat diletakkan sejajar dengan elemen lain pada baris yang sama.

Apa bedanya display:none dengan visibility: hidden?

Display none menghilangkan item dari layout web sehingga tidak akan mengambil space. Di sisi lain, visibility hidden hanya menyembunyikan item dari layout web dan masih mengambil space pada layout.

Penutup

Display CSS adalah properti yang digunakan untuk mengontrol layout elemen HTML pada halaman web. Properti ini menentukan bagaimana elemen harus ditampilkan, baik sebagai blok, inline, inline-block, flex, grid, atau tidak ditampilkan sama sekali (none). Setiap nilai dari display CSS memiliki peranannya masing-masing dalam pengembangan web.