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

Example Code

Official Specifications

• CSS basic box model (Editor's Draft)
• Collapsed flex items (from CSS Flexible Box Layout Module Level 1 — W3C Candidate Recommendation, 26 May 2016).
• CSS Level 2.1 (W3C Recommendation 07 June 2011)