CSS Visibility Property

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

CSS Visible Property Example Output