Difference between visibility: hidden and display: none

Please login or create account to add a snippet.

Follow @TagMyCode

Language: HTML

Posted by: Silvia

Added: Jul 13, 2011 2:47 PM

Modified: Jul 13, 2011 2:49 PM

Tags: display hidden none visibility

<h1>Example</h1>
<div style="border: 1px solid black; height: 60px; visibility: hidden;">
This DIV is hidden, but keep the space of its original size in the document.
</div>
<div style="border: 1px solid black; height: 60px; display: none;">
This DIV is hidden, and is completely removed from the document. The element is still in the source code and it's accessible by scripts, such as JavaScript.
</div>