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.