What is the difference between display: none and visibility:

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
display: none hides an element and it will not take up any space. Whereas visibility: hidden hides an element, but it will still take up the same space as before.