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.

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.

Compatibility

Internet Explorer for Windows versions up to and including 7:

• don’t support the value collapse
• don’t support the value inherit
• don’t allow descendant boxes of an element whose visibility value is hidden to be made visible if the ancestor has a layout

Opera up to and including version 10 treat the value collapsed as hidden for all elements.

Safari versions up to and including 4.0 and Chrome versions up to and including 3 don’t support the value collapse.