juniorCSS
Difference between display: none and visibility: hidden?
Updated Apr 28, 2026
Short answer
display: none removes the element from the document flow, while visibility: hidden hides it but keeps its space.
Deep explanation
When display: none is used, the element is entirely removed from the layout phase, meaning other elements will shift to fill its space. visibility: hidden simply makes the element invisible (opacity: 0 essentially) but the browser still calculates its dimensions, preserving the layout structure.
Real-world example
Hiding a modal background (display: none) vs keeping a placeholder structure for dynamic content (visibility: hidden).
Common mistakes
- Using visibility: hidden for mobile menus, which leaves empty gaps in the layout.
Follow-up questions
- How does screen reader behavior differ between the two?