CSS Visibility: Learn to Make Elements Visible or Hidden

CSS Visibility: Learn to Make Elements Visible or Hidden

The Visibility property in CSS

The visibility property is used to display or hide the specified HTML elements. The visibility property value as hidden makes the specified element invisible.

An element made hidden with visibility: hidden will occupy the element’s space, although that is not visible.

An example of Visibility property

The CSS Display property is also used to show or hide elements on the web page. The difference between these two properties is that the elements that are hidden by display: none property will not occupy any space.

The user feels as if there is no element or section in the web page, that is basically hidden by the developer by using the display property.

Whereas the element that is hidden by using the CSS visibility property with hidden value will occupy the element’s space. A user will see the blank space in that case.

How to use the visibility property?

Following is the syntax of using the visibility CSS property:

visibility:hidden;

Example of using visibility property to make elements hidden

The following example shows how to use the hidden value in the visibility property. The example will hide the Div and heading 2 elements with the CSS visibility: hidden property value.

The Heading1 and paragraph are visible so you can notice spaces, as such the Visibility property occupies space even after hiding the elements.

CSS visibility

Experience this example online

You can see the space between H1 and paragraph in the demo. The space is for h2 and div elements that are hidden by using the hidden value in the CSS visibility property.

 

You should also read: CSS display