CSS visibility attribute

Definition and Usage

The visibility property specifies whether an element is visible.

Tip:Even invisible elements will occupy space on the page. Use the 'display' property to create invisible elements that do not occupy page space.

Description

This property specifies whether to display the element box generated by an element. This means that the element still occupies its original space, but can be completely invisible. The value 'collapse' is used in tables to remove columns or rows from the table layout.

See Also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:Visibility Attribute

Example

Make the h2 element invisible:

h2
  {
  visibility:hidden;
  }

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
visible Default Value. The element is visible.
hidden The element is invisible.
collapse When used in table elements, this value can delete a row or a column, but it will not affect the table layout. The space occupied by the row or column will be left for other content to use. If this value is used on other elements, it will be displayed as "hidden".
inherit Specifies that the visibility property value should be inherited from the parent element.

Technical Details

Default Value: visible
Inheritance: yes
Version: CSS2
JavaScript Syntax: object.style.visibility="hidden"

Try It Yourself Example

How to make an element invisible
This example demonstrates how to make an element invisible. Do you want the element to be displayed or not?
Set the table element to collapse
This example demonstrates how to overlay table elements?

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0