CSS visibility

The CSS visibility property is used to specify the visibility of elements. It can be used to hide and display text and other elements.

Syntax

Possible Values

visible
Specifies that the generated box is visible.
hidden

Specifies that the generated box is invisible. It will therefore be fully transparent and nothing is drawn. However, it still affects the layout.

Note that descendants of the element will be visible if they are set to visibility: visible.

collapse

This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. Contents of spanned rows and columns that intersect the collapsed column or row are clipped.

This keyword is mainly intended to be used on rows, row groups, columns, column groups (and more recently, on flexbox items*). If used on any other elements, collapse is the same as hidden.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
visible
Applies To
All elements
Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

Official Specifications