CSS visibility

The CSS visibility property is used to hide or show an element. It can take one of the following values:

visible: The element is visible (default value).
hidden: The element is hidden, but still takes up space.
collapse: Only used for table elements, it removes a row or column, and its space.

Let's see some examples:

Result:

This is a visible element.

This is a hidden element.

Visible cell

Hidden cell

In the example above, we have three elements with different visibility properties set. The first element is visible, the second element is hidden, and the table cell on the right is hidden, while the cell on the left is visible.

By setting the visibility property to hidden, the element is hidden but still occupies space on the page. This can be useful when you want to hide an element without affecting the layout of the page.

On the other hand, setting the visibility property to collapse in a table element will remove a row or column from the table and its space.

Remember that even though an element is hidden with the visibility property, it can still be accessed by screen readers or other assistive technologies, unlike the display: none property which completely removes the element from the document.