CSS Visibility Property - Show and Hide Elements in Web Design

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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.