DISPLAY NONE

Dalam desain web, sering kali ada situasi di mana kamu perlu menyembunyikan elemen tertentu pada halaman web. Untuk itu, CSS menyediakan properti ‘display’ dengan nilai ‘none’.

Menggunakan ‘display: none’

Properti CSS ‘display: none’ digunakan untuk menghilangkan elemen dari tampilan tanpa mengubah tata letak halaman itu sendiri.

Berikut ini adalah contoh penggunaannya:

p.hidden {
  display: none;
}

Dalam contoh ini, semua elemen paragraf <p> dengan kelas .hidden akan dihilangkan dari tampilan, seolah-olah mereka tidak pernah ada pada halaman tersebut.

Perbedaan antara ‘display: none’ dan ‘visibility: hidden’

Seringkali ada kebingungan antara ‘display: none’ dan ‘visibility: hidden’. Keduanya akan menyembunyikan elemen, tetapi cara mereka bekerja sangat berbeda.

‘display: none’

Saat kamu menggunakan ‘display: none’, elemen tersebut secara efektif dihapus dari flow halaman. Artinya, ruang yang sebelumnya ditempati oleh elemen tersebut akan diambil alih oleh elemen lain jika ada.

div.hidden {
  display: none;
}

‘visibility: hidden’

Sebaliknya, ‘visibility: hidden’ hanya akan membuat elemen tidak tampak, namun tetap mempertahankan ruang yang ditempati elemen tersebut di halaman. Elemen lain tidak akan mengambil alih ruang tersebut.

div.invisible {
  visibility: hidden;
}