A brief discussion of CSS visibility: hidden | collapse and display: none

For the visibility attribute in CSS, its value is usually set to visible or hidden.

visibility: hidden is equivalent to display:none can hide elements, but the difference between the two is:

① Display:none elements no longer occupy space.

②　visibility: hiddenMakes the element invisible on the web page, but still takes up space.

However, visibility may also take the value collapse . When visibility: collapse is set on an element, general elements behave the same as visibility: hidden, that is, they take up space. But if the element is a table-related element, such as table row, table column, table column group, table column group, etc., its behavior is the same as display: none, that is, the space it occupies will be released.

Under different browsers, visibility: collapse is handled differently:

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

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

③ Under Chrome, even if the element is hidden, whether it is an element related to the table or not, visibility: collapse has nothing to do with visibility: hidden The difference is that it still takes up space.

The above is the detailed content of A brief discussion of CSS visibility: hidden | collapse and display: none. For more information, please follow other related articles on the PHP Chinese website!