Belajar CSS : Perbedaan Display None dan Visibility Hidden Pada CSS

Pada dasarnya seorang desainer template blogger memiliki dua cara atau alternatif untuk menyembunyikan objek dengan CSS, yaitu menggunakan display:none dan visibility:hidden .

Kedua macam CSS di atas memiliki fungsi yang sama yaitu untuk menyembunyikan objek, namun ada perbedaan antara keduanya yang wajib kamu ketahui sebagai seorang blogger.

Perbedaan display:none dan visibility:hidden

Saya beri satu contoh untuk CSS display:none

Jika anda memiliki objek dan menggunakan CSS display:none maka objek tersebut akan hilang tanpa meninggalkan suatu ruang. Dalam artian ruang yang di tempati suatu objek tadi akan hilang dan dapat di tempati objek lain.

Contoh untuk visibility:hidden

Jika anda memiliki objek dan menggunakan CSS visibility:hidden maka objek tersebut akan hilang, tapi ruangan tempat objek tersebut masih ada. Dalam artian ruang yang di tempati suatu objek tadi tidak dapat di tempati objek lain.

Karena objek yang menggunakan visibility:hidden hanya membuat objek itu tidak terlihat.

Kesimpulan

Jadi inti dari perbedaan keduanya adalah, CSS display:none membuat objek menghilang seperti tidak ada objek sama sekali.

Sedangkan CSS visibility:hidden membuat objek tidak terlihat, namun ruang dari objek masih ada.

www.idscorpion.my.id