Difference between Dispaly:none and Visibility:hidden

Display : None    Removes the element completely from the document without taking any space eventhough HTML for it still  remains in the source code.

Visibility : Hidden  Hides the element but it still takes up space in the document therefore affecting the layout.