Easy Tutorial
❮ Prop Video Paused Event Onsuspend ❯

Style visibility Property


Definition and Usage

The visibility property sets whether an element should be visible or not.

The visibility property allows authors to show or hide an element. Similar to the display property. However, the difference is that if you set display: none, it hides the entire element, whereas if you set visibility: hidden, the content of the element becomes invisible, but the element still retains its original position and size.

Syntax

Set the visibility property:

Return the visibility property:

Value Description
visible Default. The element is visible.
hidden The element is invisible but still affects the layout.
collapse When used in table rows or cells, the element is invisible (same as "hidden").
inherit The value of the visibility property is inherited from the parent element.

Browser Support

All major browsers support the visibility property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if the !DOCTYPE is specified. IE9 supports "inherit".


Example

Hide the content of an element:


❮ Prop Video Paused Event Onsuspend ❯