CSS property visibility specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout. One can set the css display property to ‘none’ to suppress box generation altogether.

CSS property visibility

CSS version:

CSS 2.1

Value:

visible | hidden | collapse | inherit

Initial:

visible

Applies to:

all elements

Inherited:

yes

visibility values

visible

The generated box is visible

hidden

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible.

collapsed

Applicable for table rows/columns. Entire row or column to be removed from the display and space made available to other content. It does not have good browser support.

Example – visibility

In this example for visibility value:

visible: First div is visible

hidden: First div is hidden here but it still takes its space.

In the following code, CSS property visibility can be changed to the following values