The visibility property controls whether an element is visually rendered, but unlike display: none, an element with visibility: hidden still occupies its normal layout space, simply invisible within it.

Syntax

visibility: visible | hidden | collapse;

Deep Dive Course

visibility: hidden makes an element completely invisible, indistinguishable from not being rendered at all visually, but it still fully participates in layout, reserving exactly the same space it would occupy if visible, unlike display: none, which removes the element from layout entirely, causing surrounding elements to shift and fill in the space it would have occupied. A nested child element inside a visibility: hidden parent can override that inheritance by explicitly setting its own visibility: visible, making that specific child visible again even while its parent remains hidden, a capability display: none simply doesn't offer, since a display: none parent removes its entire subtree from rendering with no possible override.

1Understanding Visibility

💡

Use visibility: hidden specifically when you want an element to become invisible while still reserving its layout space, preventing surrounding content from shifting to fill the gap — use display: none instead when the element should be completely removed from the layout, letting surrounding content reflow into that space.

editor.html

.tooltip {
  visibility: hidden;
}

.trigger:hover .tooltip {
  visibility: visible;
}

localhost:3000

2Practical Example

Here is a real-world application of Visibility showing how it is used in production CSS code.

editor.html

.hidden-section {
  visibility: hidden;
}

.hidden-section .always-show {
  visibility: visible;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Visibility:

1. Use visibility: hidden when an element's layout space should remain reserved even while it's invisible, avoiding a layout shift in surrounding content

2. Use display: none instead when an invisible element's space should also be freed up, letting surrounding content reflow to fill the gap

3. Take advantage of a nested child's ability to override an ancestor's visibility: hidden with its own visibility: visible, a capability display: none doesn't provide

⚠️

Tip: Use visibility: hidden specifically when you want an element to become invisible while still reserving its layout space, preventing surrounding content from shifting to fill the gap — use display: none instead when the element should be completely removed from the layout, letting surrounding content reflow into that space.

editor.html

.tooltip {
  visibility: hidden;
}

.trigger:hover .tooltip {
  visibility: visible;
}

localhost:3000

Examples

Example 01Basic Usage

.tooltip {
  visibility: hidden;
}

.trigger:hover .tooltip {
  visibility: visible;
}

Example 02Advanced Example

.hidden-section {
  visibility: hidden;
}

.hidden-section .always-show {
  visibility: visible;
}

Best Practices

Use visibility: hidden when an element's layout space should remain reserved even while it's invisible, avoiding a layout shift in surrounding content
Use display: none instead when an invisible element's space should also be freed up, letting surrounding content reflow to fill the gap
Take advantage of a nested child's ability to override an ancestor's visibility: hidden with its own visibility: visible, a capability display: none doesn't provide

Interview Question

Why does an element hidden with visibility: hidden still take up its normal layout space, while one hidden with display: none doesn't, and when does that distinction actually matter in practice?▼

Hint: Think about what each property is actually removing from the rendering process — just the element's visual paint step, or its participation in layout calculation entirely.

display: none removes an element from the layout process entirely, as if it genuinely didn't exist in the document at all for the purposes of calculating how surrounding elements should be sized and positioned, which is exactly why removing display: none causes surrounding content to reflow and shift to fill the newly available space. visibility: hidden, by contrast, only affects the final visual painting step, whether the element's pixels are actually drawn on screen, while the element still fully participates in the earlier layout calculation phase exactly as if it were visible, meaning it still reserves and occupies precisely the space it would if visible, just without anything actually being painted into that reserved space. This distinction matters directly in practice for something like a tooltip that appears and disappears on hover: using visibility: hidden/visible keeps that reserved space constant at all times, preventing surrounding content from jarringly shifting position each time the tooltip toggles, while using display: none/block instead would cause that layout-shifting behavior, since the tooltip's space would only exist in the layout while it's actually set to display.

Exercises

MediumPractice using Visibility in a real scenario.

View Solution

.tooltip {
  visibility: hidden;
}

.trigger:hover .tooltip {
  visibility: visible;
}

Frequently Asked Questions

Why does an element hidden with visibility: hidden still take up its normal layout space, while one hidden with display: none doesn't, and when does that distinction actually matter in practice?▼

Related Functions

CursorOpacityRefDimensions