freeCodeCamp/guide/english/css/properties/visibility-property/index.md

title

title
Visibility Property

Visibility Property

Visibility property can be used to control the visibility of any element. The default value is visibility: visible;

Possible values:

Visibility property can have 5 possible values.

1. visible: It is the default value which shows an element.
2. hidden: This value hides an element but preserves the layout or space occupied by the element.
3. collapse: This values is similar to hidden but is applicable for table rows or columns. It hides the row or column contents.
4. initial: This sets the property to its default value (visible).
5. inherit: This inherits the property value from that of its parent element.

Similarities and differences with other properties:

1. opacity: The difference between visibility property and opacity property, is opacity can be used for fading and element. visibility: hidden; and opacity: 0; has similar effect on an element.

2. display: The only difference between visibility: hidden; and display: none; is that, the latter removes the layout or space occupied by the element as well.

Browser compatibility:

This is a CSS2 property and is compatible with all the major browsers.

More Information:

CSS Visibility - w3school