What is the difference between visibility:hidden and display:none?

Question

The CSS rules visibility:hidden and display:none both result in the element not being visible. Are these synonyms?

Answer 1

With visibility:hidden the object still takes up vertical height on the page. With display:none it is completely removed. If you have text beneath an image and you do display:none, that text will shift up to fill the space where the image was. If you do visibility:hidden the text will remain in the same location.

Answer 2

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

Answer 3

visibility:hidden preserves the space; display:none doesn't.

Answer 4

display:none removes the element from the layout flow.

visibility:hidden hides it but leaves the space.

Answer 5

display: none removes the element from the page entirely, and the page is built as though the element were not there at all.

Visibility: hidden leaves the space in the document flow even though you can no longer see it.

This may or may not make a big difference depending on what you are doing.

Answer 6

There is a big difference when it comes to child nodes. For example: If you have a parent div and a nested child div. So if you write like this:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

In this case none of the divs will be visible. But if you write like this:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Then the child div will be visible whereas the parent div will not be shown.