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/