Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In CSS, what is the difference between visibility:hidden and visibility:collapse

They are given to be separate in W3Schools, but I see no difference in their output.

I have tried it in Google Crome.

share|improve this question
Don't rely on W3Schools, the site has a lot of errors and inaccuracies. And despite the name has nothing to do with the W3C (see: – CaffGeek Jul 12 '12 at 16:01
up vote 9 down vote accepted

hidden means the element is invisible, though the space it takes on the page remains.

collapsed means the element is invisible, AND the space it takes on the page is gone, but it only applies to table elements (otherwise, just like hidden).

See the details on MDN.

share|improve this answer
+1 for precise definitions – Yusubov Jul 12 '12 at 16:10
I don't think that's true, is it? display:none gives the functionality you're describing. visibility:collapse is a similar thing with table layouts, but not the same. If you apply it to non-table elements, it works like visibility:hidden. – pdr Jul 12 '12 at 17:43
@pdr - Thanks for the correction, quite right. Answer updated and link to source added. – Oded Jul 12 '12 at 17:46
Both of them are giving the same output to me in Crome, what's wrong? – user221287 Jul 12 '12 at 17:58
@myselfpoddar - Probably Chrome (unless you are using an element that is not a table element). As mentioned in the linked documentation, support is not universal. – Oded Jul 12 '12 at 18:00

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.