Difference between “visibility:collapse” and “display:none”

Question

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

Answer 1

Short version:

The former is used to completely hide table elements. The latter is used to completely hide everything else.

Long version:

visibility: collapse hides an element entirely (so that it doesn't occupy any space in the layout), but only when the element is a table element.

If used on elements other than table elements, visibility: collapse will act like visibility: hidden. This makes an element invisible, but it will still occupy space in the layout.

display: none hides an element entirely, so it doesn't occupy any space in the layout, but it shouldn't be used on table elements.

W3C Reference