Visibility

Description:

This property specifies whether an element is visible—that is, whether the box(es) that are generated by an element are rendered.

Note that even if a box in the normal flow is hidden, it still affects the layout of other elements, unlike the behavior that occurs when we suppress box generation altogether by setting display to none. Descendant boxes of a hidden box will be visible if their visibility is set to visible, whereas descendants of an element for which display is set to none can never generate boxes of their own.

The initial value and the inheritability were changed in CSS2.1 to address the previously undefined state for the root element.

Example:
This style rule makes the element with ID "dynamic" generate an invisible box. It can be made visible using client-side scripting:
#dynamic {
  visibility: hidden;
}

Value:

visible
The value visible makes the generated boxes visible.

hidden
The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible.

collapse
The value collapse is only meaningful for certain internal table objects: rows, row groups, columns, and column groups. It causes the object to be removed from the display; the space it occupied will be filled by subsequent siblings. This doesn’t affect the table layout in any other way, so the user agent doesn’t have to recompute the layout of the table. If a spanned row or column intersects the collapsed object, it is clipped. When it’s specified for any other element than these internal table objects, collapse causes the same behavior as hidden.