CSS - visibility Property

The visibility Property

CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.

The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users.

Syntax

The syntax for the CSS visibility property is as follows:

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

Possible Values

Applies to

The visibility property can be applied to all the HTML elements.

CSS visibility - visible Value

You can use the visibility property with visible to make an element visible.

Example

The following example uses the visibility property to make the h2 element visible.

Hide Elements with CSS visibility Property

To hide any HTML element, you can use the visibility property with the hidden value. It hides the element, but it does not remove it from the document layout. The element will still be accessible to screen readers and will affect the layout of the page, even though it is not visible.

Example

In this example, we have hidden the heading of the web page using ‘visibility: hidden;’ .

Collapse Table Cells with CSS visibility

To remove a table row, column, or any cell without affecting the layout of the table, you can set the visibility property of the row, column, or cell to collapse . This value is only valid for table elements.

Example 1

In this example, we have used the ‘visibility: collapse;’ property to collapse the table cell. You can use it to hide any row or column.

Example 2

In this example, we have used the ‘visibility: collapse;’ property on a non-table element. On a non-table element, it works as hidden value.

Supported Browsers