HTML & CSS reference

visibility

Hides an element but keeps the space it occupies.

Syntax

visibility: hidden;

Values

Parameter	Type	Description
visible	keyword	Visible (the default).
hidden	keyword	Invisible, but the space stays.
collapse	keyword	For table rows and columns — hides them like `display: none`.

Examples

visibility: hidden leaves a gap, display: none does not:

<style>
  span { background: lavender; padding: 4px; }
</style>
 
<p><span>One</span> <span style="visibility: hidden;">Two</span> <span>Three</span></p>
<p><span>One</span> <span style="display: none;">Two</span> <span>Three</span></p>

Notes

A hidden element cannot be clicked and is not read by screen readers. Unlike display, visibility can be animated with transition, which is handy for menus that fade in and out.

Related recipes

In the tutorial

The display property — Block and inline elements, the values block, inline, inline-block and none, hiding elements.

Thanks for reading!