difference between "visibility:collapse" and "display:none"

Question

what is the difference between "visibility:collapse" and "display:none"

Answer 1

visibility:collapse should only be used on tables. On other elements it will act as a visibility:hidden.

visibility:hidden hide the element but still take the space of the element whereas display:none won't even keep the space.

---

Resources :

• w3schools.com - visibility
• w3schools.com - display

On the same topic :

• What is the difference between visibility:hidden and display:none
• CSS Properties: Display vs. Visibility
• CSS display:none and visibility:hidden
• Does opacity:0 have exactly the same effect as visibility:hidden

Answer 2

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

Answer 3

visibility:collapse has a display:none behavior only for table elements. On other elements, it should render as hidden.