Perbedaan Visibility:hidden dan Display:none

Hallo all, kali ini saya mau share tentang Blog aja deh, bosen kalo game :D
Sekarang saya akan menjelaskan Perbedaan Visibility:hidden dan Display:none
Visibility:hidden dan Display:none hampir mempunyai Fungsi yang sama yaitu Membuat suatu Objek di web tidak terlihat.
Lantas apa perbedaannya? Perbedaannya akan kita contohkan
HTML Code :

<div style="background: #560; border: 3px solid #b00; color: red; margin: 8px; padding: 20px;">
<a href="http://blogrishad.blogspot.com/">Blog Rishad Harisdias</a>

Hasilnya akan menjadi :

Blog Rishad Harisdias

Nah sekarang kita tambahkan css display:none; di css span menjadi

<div style="background: #560; border: 3px solid #b00; color: red; margin: 8px; padding: 5px;">
<a href="http://blogrishad.blogspot.com/"><span style="display:none;">Blog Rishad Harisdias</span></a>

Hasilnya akan menjadi

Blog Rishad Harisdias

Nah sekarang kita ganti dengan visibility hidden

<div style="background: #560; border: 3px solid #b00; color: red; margin: 8px; padding: 5px;">
<a href="http://blogrishad.blogspot.com/"><span style="visibility:hidden;">Blog Rishad Harisdias</span></a>

Hasilnya akan menjadi

Blog Rishad Harisdias

Setelah melihat contoh contoh diatas, apakah sekarang sobat tau perbedaannya?
Jadi CSS Display:none itu bisa diibaratkan menghilangkan sedangan Visibility:None adalah menyembunyikan
Sekian artikel bisa saya sampaikan CMIIW Wassalam :D