HTML & CSS Interview Question #77
What is the difference between display: none and visibility: hidden?
CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate
Quick Interview Answer
display: none removes the element's generated box from normal layout, so surrounding content behaves as if the element were not present. visibility: hidden keeps the element's layout space but makes it invisible.
Detailed Explanation
display: none removes the element's generated box from normal layout, so surrounding content behaves as if the element were not present. visibility: hidden keeps the element's layout space but makes it invisible.
These properties also differ in accessibility behavior and interaction. If content is conditionally unavailable, the developer should choose a technique based on whether it should remain in layout and whether assistive technologies should perceive it.
Code Example
.removed {
display: none;
}
.invisible {
visibility: hidden;
}