The CSS visibility property is used to control whether an element is visible or not.
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.
This property can take one of the following values listed in the table below:
visible:It is the by default value. It specifies that the element is visible.
hidden:It specifies that the element is invisible (but still takes up space).
collapse:It is used only for table elements. It is used to remove 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:It is used to set this property to its default value.
inherit:It is used to inherit this property from its parent element.
Example of CSS visibility property:
<title>Example of CSS visibility property</title>
<h1 class="visible">I am visible</h1>
<h1 class="hidden">I am invisible</h1>
<strong>Note:</strong> An invisible element also take up the space on the page.
By using display property you can create invisible elements that don't
Let's check live example