visibility: hidden (Hide but keep the space)
<div stlye="visibility: hidden;">The Components We want to Hide</div>
By default, the value of the visibility property is visible. However, if you want to make an image invisible, you can set the value of visibility to hidden.
display: none (Hide and remove the space)
<div stlye="display: none;">The Components We want to Hide</div>
The display property controls how an element is displayed on a web page. Every element in an HTML document has a default value for the display property, although that value depends on the element. For most elements, the default display value is either block or inline.
If you don’t want an element to display on an element at all, you can set the value of the display property to none.
When you set the value of display to none, the affected element will disappear. This means the element will no longer take up any space on the web page.
Visibility vs. Display
The two methods we have discussed of hiding an element appear to be the same, but there is a difference between the two.
The display: none rule removes an element from an HTML document. While the code for the hidden element is still present, the element itself will not be displayed.
The visibility: hidden rule, on the other hand, hides an element, but the element will still take up space on the web page. If you want to hide an element but keep that element’s space on the web page, using the visibility: hidden; rule is best.
Conclusion
The display: none rule removes an element from a document and hides it from view. The visibility: hidden rule hides an element on a document and leaves the space in which the element would have appeared empty.
Thanks to careerkarma for that enlightening article.