Difference Between display: none and visibility: hidden in CSS
display: none and visibility: hidden both make elements invisible, but they behave differently in how they affect the page layout and user interaction.
display: noneremoves the element from the layout flow — it occupies no space on the page.visibility: hiddenhides the element but still keeps its allocated space in the layout.With
display: none, the element and its children are not rendered at all.With
visibility: hidden, the element remains part of the document flow but is simply invisible.Elements with
display: noneare not accessible by screen readers or focusable with the keyboard, while those withvisibility: hiddenmay still be detected by assistive technologies.
In this example, the pink paragraph is completely removed from the layout, while the yellow paragraph remains invisible but still occupies space, leaving a visible gap.
Use
display: nonewhen you want to completely remove an element from the layout, such as when toggling visibility with JavaScript.Use
visibility: hiddenwhen you want to hide an element but maintain its space, which can be useful for smooth animations or transitions.Be mindful of accessibility — screen readers may still detect
visibility: hiddenelements but notdisplay: noneones.