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

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

visibility: collapse behaves exactly like visibility: hidden in most formatting contexts: the space required by the element is 'reserved' in the layout, but the element itself is not rendered, leaving a blank space where it would have been.

There are three exceptions that I know of: table-rows, table-columns and flex items, in which visibility: collapse behaves like display: none, but with one major difference: the 'strut'. You can think of the strut as a zero-sized placeholder, that doesn't claim any space of its own in the layout process, but is nevertheless still part of the formatting structure and participates in some size computations.

A collapsed table-row, for example, will not occupy any vertical space in the table, but the table columns will still be dimensioned 'as-if' the collapsed row and its contents were actually visible. This is to prevent columns from 'wobbling' as rows are toggled in and out. Likewise, a collapsed flex item doesn't occupy any space along the main axis, but still contributes to the flex line cross-size.

'Do not use display: none with tables' is a valuable rule of thumb, but it doesn't tell the whole story.

• Use display: none if you don't want your hidden elements to participate in any way in the table (or flex line) layout process.
• Use visibility: collapse if you want to dynamically show and hide elements without destabilizing the table (or flex line) layout.

Here is a code snippet demonstrating the difference between display: none and visibility: collapse for a table row:

.show-right-border {
  border-right: 1px black solid;
}

<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>

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

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

You can also apply visibility: collapse on an element under a flexbox container (a flex item). It will act as you're applying it on an element with display: table-row or display: table-column