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

Both `display: none` and `visibility: hidden` are CSS properties used to hide elements on a webpage. While they both achieve the goal of making an element invisible to the user, they do so in fundamentally different ways that impact the document layout, accessibility, and interactivity.

display: none

When an element has display: none applied, it is completely removed from the document flow. This means the browser behaves as if the element does not exist at all on the page. It will not occupy any space, and other elements will reflow to fill the void left by the hidden element. This property is often used when you want to dynamically add or remove elements from the layout entirely.

.my-element {
  display: none;
}

visibility: hidden

In contrast, visibility: hidden hides an element but keeps it in the document flow. The element still occupies its original space on the page, and the layout of other elements remains unchanged. The element is simply rendered transparent, becoming invisible. This property is useful when you want to hide an element temporarily without altering the page layout, such as in certain animation sequences or when reserving space for future content.

.my-element {
  visibility: hidden;
}

Key Differences Summarized