Menu
What is the difference between visibility:collapse and display:none?
827
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). ... 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.
Collapsed: Do not display the element, and do not reserve space for it in layout. Hidden: Do not display the element, but reserve space for the element in layout. Visible: Display the element.
The visibility property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element without changing the layout. visibility has four valid values: visible , hidden , collapse , and inherit .
Display:none hides the element from the page, and the space it would take up on the page can be used by other elements. visibility:hidden hides the elements, but it continues to consume the space it normally would.
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
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
