HuntExams Academy
HTML/CSSBeginner#css#display

What is the difference between visibility: hidden and display: none?

display: none removes the element from the render tree entirely — it takes no space and isn't accessible. visibility: hidden hides the element visually but it still occupies its layout space and remains in the accessibility tree (though usually skipped by screen readers too).

Example
<div style="display: none">Gone, no space taken</div>
<div style="visibility: hidden">Invisible but still occupies space</div>

Related Questions

1
HTML/CSSIntermediate#css#position

Explain the CSS position property values.

Open
2
HTML/CSSIntermediate#css#position

How does position: sticky work?

Open
3
HTML/CSSIntermediate#css#float

What is the CSS float property used for and what problems does it cause?

Open