Properti display berfungsi untuk mengatur tata letak (tampilan) element HTML, biasanya digunakan untuk mengatur bagaimana element akan ditampilkan. Sedangkan properti visibility berfungsi untuk menyembunyikan dan menampilkan (visibilitas) suatu elemen dari pandangan user.

Properti Display CSS

Display adalah properti yang mengatur bagaimana elemen akan ditampilkan, apakah element tersebut akan ditampilkan sebaris dengan element lain? atau satu element menempati satu baris penuh? bahkan kita juga bisa mengatur apakah suatu element akan ditampilkan atau disembunyikan.

Setiap element memiliki nilai properti display secara default yang bergantung pada jenis elementnya. Untuk sebagian besar element memiliki nilai default block atau inline. Nilai tersebut dapat diubah/diganti sesuai dengan kebutuhan.

Properti display memiliki beberapa nilai sebagai berikut:

1. Display: block

Secara default, sebagian besar element HTML memiliki properti display dengan nilai inline atau block. Element-element tersebut termasuk dalam kategori block-level element yaitu element HTML yang memiliki properti display: block secara default tanpa harus menambahkan properti itu di CSS-nya.

Element yang memiliki properti display: block; akan mengambil lebar penuh yang tersedia dari halaman website dan dapat menggunakan properti width dan height.

Berikut beberapa element yang termasuk block-level element:
  • <div>
  • <h1> - <h6>
  • <li> dan <ol>
  • <p>
  • <header>
  • <footer>
  • <section>
  • <table>
  • <video>
  • <form>
  • <html> dan <main>

Selain elemen-elemen diatas, masih ada lagi elemen-elemen lain yang tidak disebutkan.

Berikut adalah contoh penggunaan properti display dengan nilai block.


Pada tab result, kita bisa lihat hasil dari kode di atas, display block menampilkan elemen-elemen <p> kebawah tidak sejajar dan setiap element <p> menempati lebar penuh yang tersedia dari halaman website.

Element-element <p> tersebut juga dapat menggunakan properti width, height, padding, margin dan border.


2. Display: inline

Display: inline kebalikan dari display: block. Element yang secara default memiliki properti display: inline termasuk dalam kategori inline-level element.

Element yang memiliki properti display: inline; tidak akan mengambil lebar penuh yang tersedia, melainkan hanya sebesar konten di dalamnya saja. Hal ini memungkinkan adanya element lain untuk ditempatkan di sebelah element dengan display: inline ini. 

Element yang termasuk dalam kategori inline-level (memiliki properti display: inline) tidak dapat menggunakan properti width dan height. Jadi tidak bisa diatur lebar maupun tingginya.

Berikut beberapa element yang termasuk inline-level element:
  • <a>
  • <span>
  • <img>
  • <label> dan <input>
  • <select>
Selain elemen-elemen diatas, masih ada lagi elemen-elemen lain yang tidak disebutkan.

Berikut adalah contoh penggunaan properti display dengan nilai inline.

Untuk element <p> dengan latar belakang pink, meskipun panjang teksnya hanya sekitar 2/3 dari lebar baris, box element <p> tetap memenuhi lebar satu baris penuh. Sebab <p> adalah block-level element.

Sementara untuk <span> dengan latar belakang kuning, ukuran box element hanya selebar teks "inline level elemen" saja. Oleh karena itu ada ruang sedikit di sebelah kanannya yang bisa diisi oleh element <span> dengan teks "tidak akan mengambil lebar penuh yang tersedia" dan teks "melainkan hanya sebesar konten di dalamnya saja."

Element-element <span> pada contoh di atas tidak dapat menggunakan properti width, height, padding, margin dan border karena memiliki properti display dengan nilai inline.

Kalau kita ambil kode di atas dan menambahkan properti width dan height pada element <p> dan <span> seperti ini:


Hasilnya element <p> tentu berubah lebar dan tingginya, sedangkan lebar dan tinggi dari element <span> tidak berubah karena secara default ia memang memiliki properti display: inline. Jadi kalaupun kita menambahkan properti lebar dan tinggi pada element <span>, lebar dan tingginya tidak akan terpengaruh.

3. Display: inline-block

Display: inline-block memiliki tampilan seperti display: inline. perbedaan adalah element dengan display: inline-block bisa menggunakan properti width dan height. Jadi bisa diatur lebar maupun tingginya.

Berikut adalah contoh penggunaan properti display dengan nilai inline-block.

4. Display: none

Properti display: none berfungsi untuk meniadakan suatu element tanpa mengambil ruang apapun pada halaman web. Properti ini biasanya digunakan dengan JavaScript untuk meniadakan dan menampilkan elemen tanpa menghapusnya.

Jadi, jika kita menggunakan properti display: none, tampilan dari element di sekitarnya juga ikut berubah. Kenapa? Saat kita menggunakan properti itu, halaman web kita akan ditampilkan seolah-olah element tersebut tidak ada.
Pada contoh di atas, kita bisa lihat kalau tampilan paragraf berubah jika gambarnya ditiadakan, dan ketika gambarnya ditampilkan lagi, element paragraf kembali seperti di awal. Itu karena kita memberi properti display: none pada element gambar.

Contoh lainnya:

Hasil dari kode di atas pada bagian tab result, kita bisa lihat, elemen h1 yang berisi teks "Yang ini tidak terlihat" dengan properti display: none; tidak mengambil ruang apa pun.

Properti Visibility CSS

Visibility: hidden adalah properti yang digunakan untuk menyembunyikan elemen dengan mengambil atau menyisakan ruang sesuai ukuran elemennya.

Properti visibility: hidden memiliki fungsi yang sama dengan properti display: none. Perbedaannya terletak di bagaimana pengaruhnya terhadap posisi element di sekitarnya. 

Saat kita menggunakan properti visibility: hidden pada element gambar seperti contoh di atas, jika gambarnya ditiadakan/disembunyikan, ruang yang ditempati gambar tetap ada, sehingga element paragraf di sebelahnya juga tidak akan berubah posisi.

Contoh lainnya:

Hasil dari kode di atas pada bagian tab result, kita bisa lihat, elemen h1 yang berisi teks "Ini adalah heading yang tersembunyi" dengan properti visibility: hidden; masih menyisakan ruang di browser yaitu area kosong di tengah-tengah teks.

Sumber:
https://skilvul.com/courses/css-dasar/