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

css visibility
Chris Noe picture Chris Noe · Sep 25, 2008 · Viewed 604.9k times · Source

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

Answer

kemiller2002 picture kemiller2002 · Sep 25, 2008

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

Related questions

Equivalent of jQuery .hide() to set visibility: hidden

In jQuery, there are .hide() and .show() methods which sets the CSS display: none setting. Is there an equivalent function which would set the visibility: hidden setting? I know I can use .css() but I prefer some function like .hide() …

Read More
Make one div visible and another invisible

I have two div tags, one is for the search and the other is for the results. What I need is for when the submit button is clicked the results are returned and placed into the results div (with an …

Read More
visibility:visible/hidden div

What is the best way to show a div when clicked on a button and then hide it with a close button?? My Jquery code is as follows: $(".imageIcon").click(function(){ $('.imageShowWrapper').css("visibility", 'visible'); }); $(".imageShowWrapper").click(function(){ $('.…

Read More