Difference between visibility: hidden; and display: none; in CSS

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:

display: none;

Hide

visibility: hidden;

Hide

–

Reset All

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.