WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

CSS Visiblity

~1 min read · CSS
On this page
❮ Previous Next ❯

In CSS, the visibility property controls whether an element is visible or hidden, but it differs from display: none in that hidden elements with visibility: hidden still take up space in the layout. This property is commonly used to hide elements without affecting the overall layout of the page.


Syntax:

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

Visible (default):

The element is fully visible.the element is rendered as normal and takes up space in the layout.

Example
h2 { visibility: visible; }
Try it yourself

Hidden:

The element is hidden but still occupies its original space in the layout.the element is not visible to the user, but the space it occupies remains.

Example
h2 { visibility: hidden; }
Try it yourself

Collapse:

For table rows and columns, visibility: collapse hides the row or column and removes its space in the layout. For other elements, collapse behaves the same as hidden.

Example
.collapse { visibility: collapse; }
Try it yourself

❮ Previous Next ❯