What is the difference between visibility hidden, display none, and opacity zero?
Learn how display:none, visibility:hidden, and opacity:0 differ in layout space, interactivity, accessibility, and animation — with clear CSS examples.
Expected Interview Answer
display:none removes an element from the layout entirely (it takes no space and is not rendered), visibility:hidden hides the element but keeps its space reserved in the layout, and opacity:0 makes the element fully transparent while it still occupies space and remains interactive.
The key differences are space, interactivity, and accessibility. display:none pulls the element out of the render tree, so it collapses and cannot be clicked or focused. visibility:hidden keeps the box in the flow but makes it invisible and non-interactive. opacity:0 only affects paint, so the element is still in the flow, still clickable, and still in the tab order. All three also behave differently with CSS transitions: opacity is animatable, visibility can be delayed, but display cannot be transitioned smoothly.
- display:none frees layout space and skips rendering entirely
- visibility:hidden preserves layout while hiding content
- opacity:0 keeps the element interactive and animatable
- Choosing correctly avoids layout shift and accessibility bugs
- opacity and visibility can be transitioned; display cannot
AI Mentor Explanation
display:none is a batter who leaves the field entirely — the batting order closes up and the next player moves in. visibility:hidden is a batter standing at the crease but frozen, taking no strike yet still occupying the position so no one shuffles. opacity:0 is a batter in an invisible kit who can still run and score runs even though the crowd cannot see them.
Step-by-Step Explanation
Step 1
Check layout impact
Ask whether the hidden element should keep its space. display:none collapses it; visibility:hidden and opacity:0 keep it.
Step 2
Check interactivity
opacity:0 elements are still clickable and focusable; display:none and visibility:hidden are not.
Step 3
Check accessibility
display:none and visibility:hidden remove the element from the accessibility tree; opacity:0 keeps it exposed to screen readers.
Step 4
Check animation needs
Use opacity for smooth fades. Combine visibility with a transition-delay so it hides after the fade completes.
Step 5
Pick the property
Toggle menus/modals with display or visibility; fade UI with opacity; reserve space with visibility.
What Interviewer Expects
- Clear distinction between layout, paint, and interactivity
- Awareness that display:none removes from the render tree
- Knowledge that opacity:0 stays clickable and in tab order
- Understanding of transition/animation implications
- Accessibility-tree effects of each property
Common Mistakes
- Claiming visibility:hidden removes the element's space
- Assuming opacity:0 elements cannot be clicked or focused
- Trying to transition display between none and block
- Ignoring that display:none hides content from screen readers
- Using opacity:0 to 'hide' interactive controls, leaving them tabbable
Best Answer (HR Friendly)
“All three hide an element on screen but in different ways: display:none removes it completely so it takes no space, visibility:hidden makes it invisible but still holds its spot, and opacity:0 makes it fully transparent while it still sits there and can even be clicked. Which one you pick depends on whether you want the space kept and whether the element should stay interactive.”
Code Example
/* Removed from layout: takes no space, not rendered, not clickable */
.hidden-display {
display: none;
}
/* Invisible but space is reserved; not clickable, not focusable */
.hidden-visibility {
visibility: hidden;
}
/* Fully transparent but still in layout AND still interactive */
.hidden-opacity {
opacity: 0;
}
/* Fade out then truly hide, keeping a smooth transition */
.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}Follow-up Questions
- Why can't you animate a transition on the display property?
- How does each option affect the accessibility tree and screen readers?
- How would you fade an element out and then remove it from layout?
- What is the difference between opacity:0 and pointer-events:none?
- Which of these triggers reflow versus only repaint?
MCQ Practice
1. Which property hides an element but keeps its space in the layout reserved?
visibility:hidden makes the element invisible while its box still occupies the same space in the layout flow.
2. An element with opacity:0 is clicked by the user. What happens?
opacity:0 only affects painting. The element remains in the layout and stays fully interactive, so clicks register on it.
3. Which value CANNOT be smoothly transitioned with CSS transitions?
display is not an animatable/transitionable property; it flips instantly. opacity and transform animate, and visibility can be delayed.
Flash Cards
display: none — Removes the element from the render tree — no space, no paint, not interactive, hidden from screen readers.
visibility: hidden — Element is invisible but keeps its layout space; not clickable and removed from the accessibility tree.
opacity: 0 — Element is fully transparent but stays in layout, remains clickable/focusable, and is still exposed to assistive tech.
Which are animatable? — opacity animates; visibility can be delay-transitioned; display cannot be transitioned.
Continue Learning
Related Interview Questions
What is the CSS box model and how do content, padding, border, and margin interact?
easy
What is the difference between the CSS box-sizing values content-box and border-box?
medium
How do CSS transitions and animations differ, and when do you use each?
medium
What is the difference between display block, inline, and inline-block?
easy