Beginner LevelCSS & Modern Layouts
What is the difference between opacity: 0, visibility: hidden, and display: none?
❓ Interview Prompt: Compare the three ways to hide elements regarding layout space, accessibility, and animation.
Three ways to hide elements with different behaviors:
| Method | Takes Space? | Accessible? | Animatable? |
|---|---|---|---|
| opacity: 0 | Yes | Yes (clickable/focusable) | Yes (smooth fade) |
| visibility: hidden | Yes | No (hidden from screen readers) | Yes (but snaps) |
| display: none | No (removed from flow) | No | No (cannot transition) |
Screen Reader Accessible Hidden:
To visually hide but keep accessible, use the "visually hidden" pattern instead of display: none.
Code Implementation Example
css
/* Fade out (still takes space, still clickable) */
.faded { opacity: 0; pointer-events: none; }
/* Hidden but preserves layout space */
.ghost { visibility: hidden; }
/* Completely removed from document flow */
.gone { display: none; }
/* Visually hidden but accessible to screen readers */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}💡Four methods of hiding elements with different behaviors.
🎯 Interview Key Takeaway
Use display: none to fully remove, opacity: 0 for animatable fading, and .sr-only for screen-reader-only content.
#Visibility#Hiding#Accessibility#Beginner
Back to all CSS & Modern Layouts Questions→