In this article, We will learn about the Visibility Property in CSS.

Visibility Property

The visibility property allows us to show or hide an object/element in the layout without actually changing the layout of the document. As the hidden element takes the same space as before.

If you want both, to hide and to remove the element from the layout use display property with value none instead of visibility.

We can use this property along with JavaScript to create complex website layouts.

We can use this, to hide error messages, answers in a quiz until the user selects an answer.

By the visibility property, we can hide the entire rows and columns of a table, and also we can hide the elements of row and column without changing the layout.

Visibility Property has the following values:

S.No.	Value	Description
1.	visible	The element is visible. this is the default value of the visibility property.
2.	hidden	The element is hidden but still takes up the required space.
3.	collapse	This value only applies for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). It 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 works the same as the “hidden” value.
4.	initial	It sets this property to its default value.
5.	inherit	The element inherits this property from its parent element.

Some important values that are widely used are described below:

Visibility: visible

This is the default value of the Visibility property. So it does not have any effect on the element.

Visibility: hidden

As the name suggests, it hides the element but lefts an empty space there.

It does not affect the layout as it still takes up the required space.

For Example:

#para2 {
        visibility: hidden;
       }

#para2:hover {
              visibility: visible;
              color: green;
              background-color: white;
              border: 2px solid yellow;
              }

Output:

Hover on the line below, to make the hidden line visible.

Visibility: collapse

This value only affects the table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). It removes a row or column, but it does not affect the layout of the table. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it works the same as the “hidden” value.

For Example:

#row2 {
       visibility: collapse;  /* It will remove the entire row */
      }

#row1 #element2 {
                 visibility: collapse;  /* Only the element is been removed */
                }

table,td {
          border: 1px solid black;
         }

Output:

That’s all about the Visibility Property in CSS.

Hope this article will guide you to recognize all about the Visibility Property in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.