Extensible HyperText Markup Language

visibility

Definition

The visibility property specifies if the element is visible or not. Unlike the display property, hiding elements using the visibility property causes the elements to render an invisible rectangle in place of the invisible element. The screen shot below shows a paragraph of text and an image.

Screen shot of a Web browser showing a paragraph of text with a left floating image.

The next screen shot shows what Web browsers render when the visibility property is set to hidden for the img element.

Screen shot of a Web browser shows a paragraph of text with an invisible rectangle in place of where a left floating image would render.

The screen shot below shows what Web browser render when the display property is set to none for the img element.

Screen shot of a Web browser shows a paragraph of text.

Example

  1. img {visibility: none}

Characteristics

Possible values

visible
The element is visible.
hidden
The element is hidden and an invisible rectangle is rendered in its place.
collapse
Used to hide table elements. If used on other elements, it has the same meaning as hidden.
inherit
Use the same computed value as the parent element for this property.

Default value

visible

Applies to

All elements

Inherited

Yes

See also