On the Visibility:hidden of CSS | Collapse and Display:none

for the Visibility property in CSS, the value is usually set to visible or hidden.

visibility: Hidden equivalent to Display:none, can hide the elements, but the difference between the two:

The ①display:none element no longer occupies space.

② Visibility:hidden makes elements invisible on a Web page, but still occupies space.

However, visibility may also take a value of collapse. When the element visibility:collapse is set, the general element behaves as if it were Visibility:hidden, that is, it takes up space. However, if the element is a table-related element, such as table row, table column, table column Group, table column group, and so on, it behaves like display:none, which means that the space it occupies is freed.

There are different ways to handle visibility:collapse under different browsers:

The above features of ①visibility:collapse only work under Firefox.

② in IE even if the visibility:collapse is set, the element will still be displayed.

③ under Chrome, even if the element is hidden, regardless of whether it is a table-related element, Visibility:collapse is no different from Visibility:hidden, which still takes up space.