CSSvisibility Property
More "Try it Yourself" examples below.
Definition and Usage
Thevisibility property specifies whether or not an element is visible.
Tip: Hidden elements still take up space on the page. Use the CSSdisplay property to both hide and remove an element from the document layout!
| Default value: | visible |
|---|---|
| Inherited: | yes |
| Animatable: | yes.Read aboutanimatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.visibility="hidden"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
CSS Syntax
visibility: visible|hidden|collapse|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| visible | Default value. The element is visible | Demo ❯ |
| hidden | The element is hidden (but still takes up space) | Demo ❯ |
| collapse | Only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>), and flex items. This value removes a row or column as if display: none where used. If collapse is used on other elements, it renders as "hidden" | |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
This example demonstrates how to make a table row element collapse:
tr.collapse {
visibility: collapse;
}
Try it Yourself »visibility: collapse;
}
Related Pages
CSS tutorial:CSS Display and visibility
HTML DOM reference:visibility property
