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

[cheatsheet1999]

They all make elements invisible.

But

• visibility: hidden hides the element, but it still takes up space in the layout. display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
• display: none cannot be inherited.
• display: none will adjust the spaces, thus automatically aligns the text following it to cover the space, but in case of visibility: hidden space remains intact.