CSS Visibility

CSS Visibility

The visibility property determines whether an element is visible or hidden.

Property Values

Value Description
visible Default value. The element is visible.
hidden The element is invisible (but still takes up space).
collapse Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden".
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Note: If the style rule visibility: collapse; is specified for other elements rather than the table elements, it causes the same behavior as hidden.

Syntax

visibility: visible|hidden|collapse|initial|inherit;

Example

    <!DOCTYPE html>
<html>
<head>
<style>
h1.visible {
    visibility: visible
}
h1.hidden {
    visibility: hidden
}
</style>
</head>
<body>
<h1 class="visible">I am visible</h1>
<h1 class="hidden">I am invisible</ph1>
<p>Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don?t take up space.</p>
</body>
</html>
Try it with the Editor