What is the difference between display:None and visibility:Hidden?

Question

I know you’re both hiding the element, but there’s actually a difference between:

#foo{
  display:none;
}

and

#foo {
  visibility:hidden;
}

Answer 1

display:none removes the element from the layout page. But you can still continue manipulating it in the DOM.

visibility:hidden no longer shows the element, that is, it is no longer visible on the page but its space is still occupied, that is, the layout page is not changed because of this. It’s like you turn off a light there but the lamp is still there.

1. <span style="display: none;">texto escondido</span> teste.
2. <span style="visibility: hidden;">texto escondido</span> teste.
3. <span style="opacity: 0;">texto escondido</span> teste.

I put in the Github for future reference.

The hidden resembles the opacity:0. The difference is that the latter responds to Handler Events.

Performance

Given the comment of Zuul I would say that the difference in performance is insignificant and should not be taken into account. If it is to measure the use of display: none would have a performance gain since it prevents the element from being rendered and it is obvious that this saves time when assembling the render Tree. display: none will likely cause a new rendering on much of the tree while visibility: hidden will render only the location of this element without interfering with the whole tree.

Just as we always say in programming that you should do what needs to be done in a readable way, don’t worry about performance. Then choose which gives the expected result.

As we are talking about visual elements too much performance can become a problem for the eyes in some situations where there are many changes in layout.

But if you have a very complex animation where performance can really affect, you’re probably using the wrong tool. Don’t forget that HTML is a document. You can even do something more sophisticated with it but use canvas or a SVG may be a better idea from a point.

Answer 2

The main difference is that visibility keeps the space the element occupies on the page and display: none; no, that is other elements can take their place.

The visibility: hidden; is more like the opacity: 0; (The latter allows different levels of visibility/opacity).

Both the visibility: hidden; and the display: none; do not respond to Event handlers, while the opacity allows Event handlers to be called.

Example:

$('div').eq(0).css('opacity', 0);
$('div').eq(1).css('visibility', 'hidden');
$('div').eq(2).css('display', 'none');

$('div:not(:eq(3))').click(function(){
    $('div').eq(3).find('span').html(this.innerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Teste 1</div>
<div>Teste 2</div>
<div>Teste 3</div>
<div>Clicou no elemento: <span></span></div>

Answer 3

If I don’t miss my memory, display:none removes the DOM layer element, the visibility:hidden is the same thing as opacity:0, just makes the element invisible.

Answer 4

In addition to what has already been answered (about the space occupied on the page, and the events), it is worth remembering that the display:none;, by removing the element from the DOM context, it prevents the resources used in the element from being loaded into memory. (e.g. Images, sources, etc...) Although the external content is downloaded to the client machine, the browser does not render the content, and it is not loaded into memory...

Already with the visibility: hidden; the concealment is only visual, and all content is still being rendered by the browser.