Sekilas ketika kita membuat kode program HTML dan CSS, properti display = none dan visibility = hidden mempunyai persamaan, yaitu objek menjadi tidak tampak. Sebenarnya kedua properti itu mempunyai perbedaan yang sangat nampak.
Pada properti visibility, jika diberi nilai hidden, objek akan tampak menghilang namun tempatnya tetap terisi dengan blank pada layar karena objek tetap di render.
Pada properti display, jika diberi nilai none, objek menghilang dan tempatnya pun juga tidak ada, karena objeknya tidak di render.
Contoh scriptnya ada dibawah ini (copy dan simpan dengan nama test.html)
<html>
<head>
<title>Perbedaan properti display dan visibility</title>
</head>
<body>
Makanan Buah Kesukaan : <br />
1. Jambu<br />
<span style="visibility:hidden;">2. Semangka<br /></span>
3. Jeruk<br />
4. Anggur<br />
<span style="display:none;">5. Apel<br /></span>
6. Melon<br />
<hr />
Nomor dua pakai visibility => ada tempat kosong (objek rendered) <br />
Nomor lima pakai display => tak ada tempat kosong (objek not rendered)<br />
</body>
</html>
Lihat hasilnya di bawah ini :
Demo
