CSS Visibility Property (visible, hidden, inherit, initial): To specify the element visible or not we use visibility property.
NOTE: The hidden elements occupy the space on the page for that you can use display property which can hide and remove the element.
CSS Visibility Property Details
| Default value | Visible |
| Inherited | Yes |
| Animatable | Yes |
| Version | CSS2 |
CSS Visible Property JavaScript Syntax
object.style.visibility="hidden"
CSS Visible Property Syntax
visibility: visible|hidden|collapse|initial|inherit;
CSS Visible Property values
| PROPERTY VALUES | VALUE DESCRIPTION |
|---|---|
| Visible Default Value | For the element to be visible. |
| hidden | The element may be hidden but occupies the space. Collapse used only for table rows, row groups, columns, column groups. It may remove a row/column, but does not affect the table layout. This space can be available for other content. If a collapse is used on other elements, it simply is like “hidden”. |
| Initial | Sets the property to its default value. |
| Inherit | Inherits the property from its parent element. |
CSS Visible Property Example
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
tr.collapse {
visibility: collapse;
}
</style>
</head>
<body>
<h1>The visibility Property</h1>
<table>
<tr>
<td>lion</td>
<td>tiger</td>
</tr>
<tr class="collapse">
<td>dog</td>
<td>cat</td>
</tr>
</table>
</body>
</html>
CSS Visible Property Example Output
