CSS visibility Property
More "Try it Yourself" examples below.
Definition and Usage
The visibility
property specifies whether or not an element is visible.
Tip: Hidden elements still take up space on the page. Use the CSS display property to both hide and remove an element from the document layout!
Default value: | visible |
---|---|
Inherited: | yes |
Animatable: | yes. Read about animatable |
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 about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
This example demonstrates how to make a table row element collapse:
tr.collapse {
visibility: collapse;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Display and visibility
HTML DOM reference: visibility property