What Is the Difference Between visibility and display in CSS?
Learn the difference between visibility: hidden and display: none in CSS, how each affects layout space, accessibility, and when to use which one.
Expected Interview Answer
visibility: hidden hides an element visually but still reserves its space in the layout, while display: none removes the element from the layout entirely, so nothing else takes its place and no space is reserved.
Because visibility: hidden keeps the element in the flow, its box still occupies room, and child elements can override it locally with visibility: visible to reappear. display: none instead removes the element and its children from the render tree entirely, collapsing its space so surrounding elements shift to fill the gap; you cannot selectively re-show a child once its ancestor is display: none. This distinction matters for animations, hidden-until-hover UI, and accessibility, since display: none also removes the element from the accessibility tree while visibility: hidden leaves it in the layout but not exposed to assistive tech either.
- visibility: hidden preserves layout space for smoother toggles
- display: none fully removes an element for real conditional rendering
- Choosing correctly avoids layout shift (CLS) bugs
- visibility allows child overrides; display: none does not
- Both are understood correctly by interviewers as a common trap question
AI Mentor Explanation
visibility: hidden is like a substitute fielder standing in their designated spot on the field but wearing a training bib that makes them invisible to the TV broadcast — their position is still held, the field layout is unchanged, they just aren't shown.
Step-by-Step Explanation
Step 1
visibility: hidden keeps layout space
The element becomes invisible but its box still occupies room, so surrounding elements do not shift.
Step 2
display: none removes it from layout
The element and its box are removed from the render tree entirely, so surrounding elements reflow to fill the gap.
Step 3
Children can override visibility locally
A child can set visibility: visible to reappear even if its parent is visibility: hidden; this is not possible with display: none.
Step 4
Accessibility tree impact
Both remove the element from being announced by screen readers, but only display: none fully removes it from the render/layout tree.
Step 5
Choosing based on use case
Use visibility: hidden when you want to preserve spacing (e.g., a placeholder that will reappear), and display: none for true conditional rendering.
What Interviewer Expects
- States clearly which one preserves layout space and which removes it
- Explains the child-override behavior unique to visibility
- Connects the choice to layout shift (CLS) considerations
- Mentions the accessibility tree implications of both
- Can give a real use case for each property
Common Mistakes
- Saying both properties behave identically
- Assuming visibility: hidden removes the element's space
- Believing display: none still allows tab/keyboard focus
- Forgetting that opacity: 0 is a distinct third option that keeps the element focusable
Best Answer (HR Friendly)
“visibility: hidden hides an element but keeps its space reserved on the page, so nothing moves. display: none removes the element completely, so the rest of the page reflows to fill the gap. Picking the right one avoids layout jumps or unwanted empty gaps.”
Code Example
.hidden-but-reserved {
visibility: hidden; /* space still reserved */
}
.removed-entirely {
display: none; /* no space reserved, layout reflows */
}
.hidden-but-reserved .child-override {
visibility: visible; /* child can reappear despite hidden parent */
}Follow-up Questions
- How does opacity: 0 differ from visibility: hidden and display: none?
- How do these properties affect screen reader accessibility?
- Which property would you use for a smooth fade-in/fade-out transition?
- Can a child element override display: none set on its parent?
- How do these properties impact Cumulative Layout Shift (CLS)?
MCQ Practice
1. Which property hides an element but still reserves its layout space?
visibility: hidden hides the element visually while its box still occupies space in the layout.
2. Which property removes an element from the layout entirely?
display: none removes the element from the render tree, so no space is reserved and surrounding elements reflow.
3. Can a child element override a parent's visibility: hidden?
Unlike display: none, visibility is inherited but can be overridden per-element, so a child can set visibility: visible to reappear.
Flash Cards
Does visibility: hidden reserve layout space? — Yes, the element's box still occupies its space in the layout.
Does display: none reserve layout space? — No, the element is removed from the render tree and no space is reserved.
Can a child override visibility: hidden from its parent? — Yes, with visibility: visible; this is not possible with display: none.
Are both hidden from screen readers? — Yes, both remove the element from being announced, though only display: none removes it from layout too.