HTML & CSS · Junior · Question 18 of 75
How does display: none differ from visibility: hidden?
- ✓Correct answer:
display: noneremoves the element from layout;visibility: hiddenhides it but keeps its space - 2
visibility: hiddenremoves the element from the DOM, whiledisplay: noneonly makes it transparent - 3No difference: both hide the element and free up its space in the layout the same way
Explanation
With display: none the element isn't rendered and takes no space - neighbors shift. With visibility: hidden it's invisible but its space remains. opacity: 0 also keeps the space, and the element stays clickable. None of these remove the element from the DOM, and screen readers ignore only the first two.