CSS visibility: hidden VS display: none

visibility: hidden hides an element, but the space it takes up is still reserved on the web page. In other words, the element is not visible, but it still takes up space on the page and can affect the layout of other elements. The hidden element is still present in the document flow and can still be interacted with using JavaScript.

Here is an example of using visibility: hidden:

.hidden {
  visibility: hidden;
}

On the other hand, display: none hides an element and also removes it from the document flow. In other words, the element is not visible, and it does not take up any space on the page. The removed element cannot be interacted with using JavaScript because it is no longer part of the document flow.

Here is an example of using display: none:

.hidden {
  display: none;
}

In summary, if you want to hide an element but still maintain its position on the page and its interactions with JavaScript, use visibility: hidden. If you want to hide an element and remove it from the document flow entirely, use display: none.

Codepen Example: