CSS visibility: Hide Elements and Keep Their Space

visibility: hidden makes an element invisible, but it still takes up its space.

index.html

HTML

<style>
  p { background: #d0e8f2; padding: 8px; margin: 4px 0; }
  .invisible { visibility: hidden; }
</style>
<p>Paragraph one</p>
<p class="invisible">Paragraph two (invisible, still there)</p>
<p>Paragraph three</p>

There is an empty gap between one and three: the hidden paragraph’s box is still in place.

Values

Value	Result
`visible`	Shown (default)
`hidden`	Not drawn, space kept, not clickable, hidden from screen readers
`collapse`	For table rows and columns, removes them. Elsewhere acts like `hidden`

Children can come back

An unusual feature: a child can set visibility: visible inside a hidden parent and show up again. display: none has no such option.

Typical uses

Hide something without making the page jump, for example an error message area that appears under a field.
Combine with opacity for fade-in effects, because visibility can be switched with a transition while display cannot.

style.css

CSS

1
2

.tooltip { opacity: 0; visibility: hidden; transition: opacity .2s; }
.trigger:hover .tooltip { opacity: 1; visibility: visible; }

The visibility: hidden part keeps the invisible tooltip from being clicked or read when it is not shown.