3 min read
•Question 21 of 49easyWhat is the difference between visibility and display?
Understanding visibility hidden vs display none.
What You'll Learn
- visibility vs display
- opacity differences
- When to use each
Comparison
| Property | Space | Events | Animatable |
|---|---|---|---|
| display: none | No | No | No |
| visibility: hidden | Yes | No | Yes |
| opacity: 0 | Yes | Yes | Yes |
Examples
styles.cssCSS
/* Removes from layout */
.hidden {
display: none;
}
/* Invisible but keeps space */
.invisible {
visibility: hidden;
}
/* Transparent but clickable */
.transparent {
opacity: 0;
}Use Cases
styles.cssCSS
/* Toggle visibility with animation */
.fade {
transition: opacity 0.3s, visibility 0.3s;
opacity: 1;
visibility: visible;
}
.fade.hidden {
opacity: 0;
visibility: hidden;
}