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

Question

Both of these result in the element not being visible. Are these synonyms?

Answer 1

display:none removes the element from the layout flow

visibility:none hides it but leaves the space

Answer 2

display:none means that the 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. so for example

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

display:none would be:

test |   | test

visibility:hidden would be:

test |                        | test

In visibility:hidden the tag is rendered, it just isn't seen on the page.

Answer 3

Display: none entirely removes the element from the page, 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 4

They're not synonyms - display: none removes the element from the flow of the page, and rest of the page flows as if it weren't there.

visibility: hidden hides the element from view but not the page flow, leaving space for it on the page.

Answer 5

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 6

display:none will hide the element and collapse the space is was taking up, whereas visibility:hidden will hide the element and preserve the elements space. display:none also effects some of the properties available from javascript in older versions of IE and Safari.

Answer 7

They are not synonyms.
display:none removes the element from the normal flow of the page, allowing other elements to fill in.
visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none.

Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden.

.

Answer 8

Thanks orip for the correction. I've gone furtherer than necessary. It's indeed still in the DOM available for javascript manipulations. My fault.

Just write an article about this, should clarify the question:

http://www.kavoir.com/2009/02/css-difference-between-opacity0-visibilityhidden-and-displaynone.html

Answer 9

One thing worth adding, though it wasn't asked, is that there is a third option of making the object completely transparent. Consider:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

In this case you get:

1st link.
2nd        link.
3rd        link.

The difference between 1 and 2 has already been pointed out (namely, 2 still takes up space). However, there is a difference between 2 and 3: in case 3, the mouse will still switch to the hand when hovering over the link, and the user can still click on the link, and Javascript events will still fire on the link.

Note: For brevity, I only listed "opacity: 0;" on the 3rd link, but IE doesn't recognize this CSS rule. For IE these styles must be used for the same effect: "zoom: 1; filter: alpha(opacity = 0);"