display: none removes the element from the layout, so it takes no space and the content around it closes the gap. visibility: hidden keeps the element's box in the layout and only stops drawing it, so an empty space stays where it was.
They also differ for children. A child of a visibility: hidden parent can set visibility: visible and appear again, while nothing inside a display: none element renders.
In two ways they behave the same:
- Neither one can be clicked or take keyboard focus.
- Both leave the accessibility tree, so neither hides text visually while keeping it for screen readers.
Toggling display makes the browser recalculate the layout, because the page reflows around the gap. Toggling visibility only repaints.
opacity: 0 is a third option. It keeps the space and still receives clicks, which is why fade effects often pair it with visibility.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓