difference between "visibility:hidden" and "display:none"

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

?

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

?

http://www.w3schools.com/css/css_display_visibility.asp