What's the difference between display: none and visibility: hidden?

Question: What's the difference between display: none and visibility: hidden?

The display: none and visibility: hidden CSS properties appear to be the same thing, but they aren't.

Answer:

These two style properties do two different things.

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.

You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.