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

display: none completely removes the element from the document flow. It does not occupy space, does not respond to events, and is not visible. It is equivalent to the element not being on the page at all.

visibility: hidden hides the element but leaves the space it would occupy in the document flow. The element is not visible, but its size and position affect the layout of other elements. It does not respond to events.

Property	Space in document flow	Display	Impact on other elements	Response to events
display: none	No	No	Does not affect	No
visibility: hidden	Yes	Hidden	Affects	No