Explain the difference between visibility: hidden and display: none?

visibility:hidden hides the element, but it occupies space and affects the layout of the document, for example, you are standing in a queue and you wear the invisible cloak from Harry Potter. People would see an empty space. whereas, display:none also hides the element but not occupy space. It will not affect the layout of the document. for example, person in the queue would not exist and won't occupy any space.