In this section, we will learn what the visibility property is and how to use it in CSS.

CSS visibility Property Definition and Usage

In HTML, we can hide an element on a page!

This is done with the help of a CSS property called “visibility”.

This property will hide the element but left an empty space where the element would have been.

Note: if you hide a parent element, the child will be hidden as well. Basically, child element does inherit this value from its parent.

CSS visibility Property Syntax

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

CSS visibility Property Value

There are three values we can use for this property:

• visible: using this property, we can make the element visible to users (default).
• hidden: using this property we can make the element hidden to users.
• collapse: same as “hidden” but used for table row or cell (explained in table section)

The two global values, “initial” and “inherit” can also be used for this property.

Example: visibility in CSS

See the Pen visibility in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS hide element

In the example below, we strictly set the child element to have “visible” as the value for its `visibility` property and so, as a result, the child element becomes visible even though its parent is hidden.

See the Pen CSS hide element by Enjoy Tutorials (@enjoytutorials) on CodePen.