Difference between visibitily: hidden and display: none CSS property

Using visibility: hidden is easily confused with display: none, but the difference between then is very important. 99% of the time, when we want to hide an element on our page, we'll use display: none, Using display: none will ensure that the space occupied by the "invisible" element disappears along with the element itself. But there are some rare instances when we don't want this to happen. Instead, we want the space that the element occupies to remain exactly the same. So in this case, the correct CSS would be visibility: hidden.

Thus, display: none affects the flow of the document; visibility: hidden doesn't.