CSS display:none ile visibility:hidden Farkı
display:none elementi yok eder, visibility:hidden ise elementi gizler.
1) display:none
Elementi ve sayfada kapladığı boşluğu yok eder. Sayfa derlenirken element yokmuş gibi davranılır.
CSS Kodu
h1.hidden{display:none;}
HTML Kodu
<h1>Burada görünür bir başlık var</h1> <h1 class="hidden">Burada gizli bir başlık var</h1> <p>display:none; kullanılarak gizlenen başlık sayfada yer kaplamaz.</p>
2) visibility:hidden
Elementi gizler, sayfada kapladığı boşluk kalır. Sayfa derlenirken element varmış gibi davranılır ancak element gösterilmez.
CSS Kodu
h1.hidden{visibility:hidden;}
HTML Kodu
<h1>Burada görünür bir başlık var</h1> <h1 class="hidden">Burada gizli bir başlık var</h1> <p>visibility:hidden; kullanılarak gizlenen başlık sayfada yer kaplar.</p>
Kaynak: http://hakantasan.com/index/makaleler/47/css-displaynone-ile-visibilityhidden-farki/