DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

DISPLAY NONE

Belajar bagaimana menggunakan properti CSS display none untuk menyembunyikan elemen dari halaman web.

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;
}
👈🏼 Display inline-block
Position static 👉🏼