What is the difference between visibility: hidden and display: none ?

CSS provides two useful properties for controlling the visibility of elements on a web document: “visibility” and “display.”

The main difference between visibility: hidden; and display: none; in CSS lies in how they affect the visibility and layout of elements on a web page.

1. visibility: hidden;
   • When you apply visibility: hidden; to an element, it becomes invisible, but it still takes up space on the web page. In other words, the element’s content and layout properties (e.g., width, height, padding, margin) are preserved as if the element were still visible.
   • The hidden element is not visible to users, but it affects the positioning of other elements around it, just as if it were visible.

Example:

.hidden-element {
  visibility: hidden;
}

2. display: none;
   • When you apply display: none; to an element, it becomes invisible, and it does not take up any space on the web page. The element is entirely removed from the document flow.
   • The hidden element is not visible to users, and it does not affect the layout of other elements around it because it is effectively removed from the document.

Example:

.hidden-element {
  display: none;
}

In summary:

• visibility: hidden; hides the element but preserves its space in the layout.
• display: none; hides the element and removes it from the layout, making it as if the element doesn’t exist on the page.

See the Pen Untitled by Anup Kumar Maurya (@rockanup567) on CodePen.

When to use each property depends on the specific use case:

• Use visibility: hidden; if you want to hide an element but maintain its space in the layout, so other elements will flow around it.
• Use display: none; if you want to hide an element completely and remove it from the layout, as if it were not part of the page.