CSS visibility Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The visibility CSS property specifies whether an element is visible on the screen or not. That is, whether the boxes generated by an element are rendered or not.
The following table summarizes the usages context and the version history of this property.
| Default value: | visible |
|---|---|
| Applies to: | All elements |
| Inherited: | Yes |
| Animatable: | Yes. See animatable properties. |
| Version: | CSS 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the visibility property in action.
Example
Try this code »p {
visibility: hidden;
}
div {
visibility: hidden;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
visible |
The box and its contents are visible. This is default. |
hidden |
The box and its content are invisible, but still affect the layout of the page. |
collapse |
Only for certain internal table objects: rows, row groups, columns and column groups. It removes the objects, but it does not affect the table layout in any other way. The space occupied by the table object will be filled by subsequent siblings. If collapse is specified for other element, it causes the same behavior as hidden. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element visibility property. |
Browser Compatibility
The visibility property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Visibility, CSS Display.
Related properties: display.
