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

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.