Three declarations with different effects
display: none removes an element’s box from layout, so later content moves into its place. visibility: hidden keeps the space but hides the element. opacity: 0 makes the element transparent while its box remains; it may still receive pointer and keyboard interaction. These properties are not interchangeable ways to “turn something off”.
Both display: none and visibility: hidden generally remove hidden content from the accessibility tree. Opacity alone does not make an interactive element unavailable to assistive technology or keyboard navigation. If a control must truly be inactive, handle its state in the HTML and application logic as well as its appearance.
| Rule | Takes up layout space? | Can still receive focus or clicks? |
|---|---|---|
| display: none | No | No while hidden |
| visibility: hidden | Yes | No while hidden |
| opacity: 0 | Yes | Potentially yes |
Compare cards in a row
Place three cards in a flex container, then apply one hiding rule to the middle card. With display: none, the third card moves into the second card’s place. With visibility: hidden, a blank gap remains. With opacity: 0, the gap also remains, but the invisible card may still be interactive if it contains a link or button.
The CSS below uses visibility: hidden because the example wants to reserve the card’s space. Change the declaration to display: none and then opacity: 0 to observe the differences; avoid placing a live control inside an opacity-zero element.
HTML
<div class="cards"><div>One</div><div class="hidden-card">Two</div><div>Three</div></div>CSS
.cards { display: flex; gap: 1rem; }
.cards > div { padding: 1rem; border: 1px solid #555; }
.hidden-card { visibility: hidden; }Choose based on the user’s task
If content is currently irrelevant to everyone, remove it from view and interaction with an appropriate hidden state, such as the HTML hidden attribute or display: none. If a layout must reserve space temporarily, visibility: hidden may be appropriate. If fading a visible component, opacity can animate, but coordinate focus and pointer handling so an invisible button cannot trap or confuse a user.
Hiding visually while preserving text for assistive technology is a separate technique with its own carefully tested CSS. Do not assume any of the three declarations here provides that behaviour.
Common pitfalls
A transparent overlay with opacity: 0 can still block clicks. A missing card caused by display: none can change grid or flex positioning. visibility: hidden may leave an intentional blank space that looks like a layout bug. Inspect the computed value and the accessibility tree when the effect is unclear.
Syntax
display: none;
visibility: hidden;
opacity: 0;Examples
Reserve a card’s place while hiding it
Change visibility to display or opacity to compare the effect.
.cards { display: flex; gap: 1rem; }
.cards > div { padding: 1rem; border: 1px solid #555; }
.hidden-card { visibility: hidden; }- display: flex arranges the three card boxes in a row.
- visibility: hidden hides the middle card but preserves its allocated space.
- Changing to display: none removes its box; changing to opacity: 0 leaves an invisible box that may still interact.
HTML used by this example
<div class="cards"><div>First card</div><div class="hidden-card">Hidden card</div><div>Third card</div></div>Best practices
- Choose a hiding technique based on layout and interaction requirements.
- Never rely on opacity alone to disable a control.
- Test focus order and the accessibility tree after hiding interactive content.
Runtime & versions
Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
CSS specifications (modules)