English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The Visibility property specifies whether an element is visible or hidden.
You can use the visibility property to specify whether an element is visible. This property can take one of the following values listed in the table below:
| Value | Description |
|---|---|
| visible | Default value. The box and its content are visible. |
| hidden | The box and its content are not visible, but still affect the layout of the page. |
| collapse | This value causes the entire row or column to be removed from the display. This value is used for row, row group, column, and column group elements. |
| inherit | The value of the visibility property should be inherited from the parent element, that is, use the same visibility value as its parent element. |
visibility: collapse; however, the style rule will remove the internal table elements but will not affect the layout of the table in any other way. The space usually occupied by the table elements will be filled by the following同级 elements.
Note:If the style rule visibility: collapse; is specified for other elements (not table elements), its behavior is the same as hidden.
CSS display and visibility properties seem to be the same, but in fact they are completely different and often confuse new web developers.
visibility: hidden; hides the element, but it still occupies the space in the layout. If the visibility of the child elements of the hidden box is set to 'visible', they will be visible.
display: none; closes the display and completely removes the element from the document. Even if its HTML is still in the source code, it does not occupy any space. Even if the display properties of all child elements are set to none, the display will be closed.
The Visibility property has four available values (visible, hidden, collapse, and inherit), but the commonly used values are visible and hidden.
visibility: visible /* The element is visible, the default value */ visibility: hidden /* The element is not visible, but it still retains the corresponding space */ visibility: collapse /* Only effective for table objects, it can remove rows or columns without affecting the layout of the table. If this value is used on objects other than table, it will be displayed as hidden. */ visibility: inherit /* Inherit the visibility value of the parent element. */
There are many available values for the Display property, but here we only focus on a few of them: block, none, and inline
display: none /* The element is invisible and no corresponding space is reserved for it */ display: block /* Presented as a block element (generally occupying a line by itself) */ display: inline /* Presented as an inline element (generally not occupying a line by itself) */
As can be seen from the above, although both Visibility and Display properties can hide an element, the difference between them is that visibility: hidden still reserves the required space for the element on the page while hiding it, while display: none acts as if the element is deleted from the page, and the element is not visible on the page.
In addition, the difference between display: block and display: inline is that block elements occupy a line by themselves on the page, while inline elements do not. Some objects are default block elements, while others are default inline elements. Attention should be paid to prevent the repetition of the same properties when using them.
Although both Visibility and Display properties can achieve the purpose of hiding page elements, their difference lies in how they respond to the normal document flow.
If you want to hide an element but keep the space of the element on the page, you should use visibility: hidden. If you want to hide an element while filling the blank with other content, you should use display: none.