The display: none; and visibility: hidden; both are used to hide elements in CSS. However, the way they hide elements is totally different.
When we apply visibility: hidden; on an element, it becomes invisible but still takes up the same space as it was taking while visible.
The display: none; on the other hand completely removes the element from the document. Therefore the element no longer takes up any space on the page.
See the live demo below:
Try out the following example for more clarification:
Example:
.hide{
visibility: hidden;
}
.remove{
display: none;
}
Conclusion
The difference between visibility: hidden; and display: none; is that the visibility: hidden; only makes the element invisible. But the element still reserves its actual space on the page.
The display: none; on the other hand completely removes the element from the document. So, the element does not take up any space after it’s hidden.
