This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

visibility

Summary

The visibility property specifies whether the boxes generated by an element are rendered.

Overview table

Initial value
visible
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
As specified
Animatable
Yes
CSS Object Model Property
visibility

Syntax

  • visibility: collapse
  • visibility: hidden
  • visibility: inherit
  • visibility: visible

Values

inherit
Takes the same specified value as the property for the element’s parent.
visible
The element is visible.
hidden
Object is hidden. The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have 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. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, ‘collapse’ has the same meaning as 'hidden’.

Examples

.visible {
  visibility: visible; /* Visible value */
}
.hidden {
  visibility: hidden; /* Object is invisible, but still affects layout */
}
.inherit {
  visibility: inherit; /* Inherits parent property */
}
.collapse {
  visibility: collapse; /* Collapses object on table elements. Browser support varies. */
}

View live example

Notes

Remarks

Unlike elements styled with the display property, elements that are not visible (visibility: hidden) still reserve the same physical space in the content layout as they would as if they were visible. You can change the visibility through scripting to show and hide overlapping content based on user interaction. Also, a child element can be visible when its parent is hidden.

Syntax

visibility: visible | hidden | collapse | inherit

See also

Related pages

Attributions