CSS Layout — display:none vs visibility:hidden?

Why This Question Matters

If you're just starting with CSS, you'll quickly realize there are about five different ways to make something "disappear" from a webpage. When you're in a rush to fix a UI bug, it's tempting to think that display: none and visibility: hidden are basically the same thing. After all, the element is gone from the screen, right?

Wrong.

This is one of those classic "gotcha" questions in technical interviews because it tests whether you actually understand the CSS Box Model and how the browser renders the DOM. Using the wrong one can break your layout, mess up your accessibility (a11y), or cause weird gaps in your design that you can't seem to figure out.

Understanding the Code

Since we aren't looking at a specific snippet, let's look at the two properties in action.

Imagine you have a simple div with some text inside it, sitting in the middle of a page.

#### display: none
When you apply display: none, you aren't just hiding the element; you're effectively removing it from the render tree. The browser treats it as if it doesn't exist. It takes up zero pixels of space. If you have three boxes in a row and you set the middle one to display: none, the third box will slide over and take its place.

#### visibility: hidden
This is a completely different beast. visibility: hidden hides the element visually, but it keeps the element's dimensions. The browser still calculates how much space the element needs and reserves that spot. It's like an "invisible man" standing in a room—you can't see him, but you still can't walk through the space where he's standing.

Finding the Correct Answer

The question asks if these two properties hide an element the same way. The answer is False.

Here is the breakdown of why:

1. Layout Impact: display: none removes the element from the layout flow. visibility: hidden keeps it in the flow.
2. DOM Presence: Both keep the element in the DOM (you can still find it with JavaScript), but only one affects the visual geometry of the page.
3. Inheritance: This is a subtle but important point. visibility is inherited. If you set a parent to visibility: hidden, but then set a child to visibility: visible, that child will actually show up. You can't do that with display: none. If the parent is display: none, the children are gone regardless of their own settings.

Common Mistakes Developers Make

The most common mistake I see juniors make is using visibility: hidden when they actually want the rest of the content to shift and fill the gap. They end up with these weird, empty white spaces in their UI and spend an hour wondering why their margins aren't working.

Another trip-up is accessibility. Screen readers (like VoiceOver or NVDA) generally ignore elements with display: none. However, depending on the browser and the specific property used, visibility: hidden can sometimes behave inconsistently with assistive technology.

Also, don't confuse these with opacity: 0. While opacity: 0 also keeps the space reserved (like visibility: hidden), it differs because the element is still "there" and interactive. You can still click a button that has opacity: 0, but you cannot click a button that is visibility: hidden or display: none.

Real-World Usage

In a production environment, we use these for very different purposes.

Use display: none for:

Use visibility: hidden for:

Key Takeaways