visibility

Overview

The visibility property determines an element's appearance on the page by setting it to visiblehiddenor collapsed. Unlike the display: none propertywhich entirely removes an element from the layoutvisibility hides an element while preserving its space in the layoutinfluencing the position of other elements accordingly.

Examples and Usage

The following example demonstrates the use of the property with visible and hidden values.

<h3 class="visible-heading"> I am a visible heading. </h3>

<h3 class="hidden-heading"> I am a hidden headingbut I still take up space in the layout. </h3>

<span> Upon selecting these elements in a test environmentyou'll notice the second heading is still present and occupies space on the page. </span>

.visible-heading {
  visibility: visible; /* Default behavior: the element is visible */
}

.hidden-heading {
  visibility: hidden; /* The element is invisible but still takes up space in the layout */
}

In additionthere's also the collapse value which only affects table elements or elements d as such with the display property. It hides the table sub-element without leaving the space it occupiedunlike the hidden value. Howeverthe collapse value isn't consistently supported across browsers and may lead to various quirks. Thusit is recommended to exercise caution or steer away from it entirely.

Values

The visibility property accepts the following values:

Associated Properties

There are no direct associated properties to visibilitybut it's often compared and contrasted with the display propertywhich also controls the visibility of elements but affects the layout differently.

Tips and Tricks

• Use the visibility property when you need to hide an element without affecting the layout or position of surrounding elements.

• If you need to completely remove an element from the layoutconsider using the display: none property instead.

• Remember that the collapse value only affects table elements.

• The hidden value allows you to visually hide an element while it still occupies space on the pagewhich is different from display: none. This property doesn't inherit by defaultmeaning that you can make an element hidden while keeping its children visible.

• Be aware that using the visibility: hidden value on an element will remove it from the accessibility treecausing it and its descendants to no longer be announced by screen reading technology.

Browser Compatibility

Caution: Internet Explorer doesn't support visibility: initialvisibility: unsetand in versions up to IE7hidden elements' descendants remain invisible even when their visibility is set to visible.

Useful Resources

Can I use - Visibility Property (for specifics on browser compatibility)

W3C CSS Display Module: visibility

CSS Flexbox Module Level 1: visibility-collapse (visibility: collapse; is also used in Flexbox and better defined in that context)