The display: none; removes the element where it leaves nothing on the page. It allows the other elements to fill in. The visibility: hidden; hides the element but it still covers the place with the empty space.
For instance, if you want to reserve the empty space for future use, you may use the visibility: hidden; and if you want to remove an element from a certain page, you may use the display: none;