visibility:hidden vs display:none in CSS Explained

By the end of this page, you will understand how visibility: hidden and display: none differ in CSS, especially in layout, spacing, interactivity, and common real-world use. You will also see when to choose one over the other and how to avoid beginner mistakes.

visibility and display control different parts of how an element behaves in the browser.

• display: none removes the element from the document layout.
• visibility: hidden keeps the element in the layout, but makes it invisible.

That difference matters because web pages are laid out like a flow of boxes. If an element is removed from that flow, other elements can move into its place. If it stays in the flow but becomes invisible, its space is still reserved.

display: none

When you set:

display: none;

the browser behaves as if the element is not there for layout purposes.

• The element is not drawn
• Its width and height no longer affect the page
• Nearby elements shift to fill the gap

visibility: hidden

When you set:

visibility: hidden;

the browser still keeps the element's box in the layout.

• The element is not drawn
• Its space remains reserved
• Nearby elements do not move into its place

Why this matters

This difference is important in real interfaces:

• Hiding a menu temporarily may require removing it completely with display: none
• Hiding a placeholder while preserving spacing may be better with visibility: hidden
• Layout shifts can affect usability and visual stability

In short:

• Use display: none when the element should disappear completely from layout
• Use visibility: hidden when the element should be invisible but still occupy space

Think of a page like a row of seats.

• display: none is like removing a chair entirely. The other chairs slide over and fill the space.
• visibility: hidden is like keeping the chair there but covering it with an invisible sheet. You cannot see it, but it still takes up room.

That is the easiest way to remember the difference:

• display controls whether the chair exists in the row
• visibility controls whether you can see the chair

Basic syntax

.hidden-by-display {
  display: none;
}

.hidden-by-visibility {
  visibility: hidden;
}

Example 1: display: none

<div class="box">Box 1</div>
<div class="box remove">Box 2</div>
<div class="box">Box 3</div>

.box {
  width: 100px;
  height: 50px;
  margin: 8px;
  background: steelblue;
  color: white;
}

.remove {
  display: none;
}

What happens?

• Box 2 is removed from layout
• Box 3 moves up as if Box 2 never existed

Example 2: visibility: hidden

<div class="box">Box 1</div>
<div class="box invisible">Box 2</div>
<div class="box">Box 3</div>

.box {
  width: 100px;
  height: 50px;
  margin: 8px;
  background: seagreen;
  color: white;
}

.invisible {
  visibility: hidden;
}

What happens?

• Box 2 is invisible
• Its space still remains
• Box 3 stays in the same position

Quick visual summary

display: none      -> element disappears, layout closes the gap
visibility: hidden -> element disappears, layout keeps the gap

Consider this HTML:

<div class="item">A</div>
<div class="item hidden">B</div>
<div class="item">C</div>

And this CSS:

.item {
  display: block;
  width: 80px;
  height: 40px;
  margin-bottom: 10px;
  background: tomato;
  color: white;
}

.hidden {
  visibility: hidden;
}

Step by step

1. The browser reads the HTML and creates three div elements: A, B, and C.
2. Each element gets the .item styles.
3. All three elements are placed in the layout as block elements.
4. The second element also gets .hidden.
5. visibility: hidden tells the browser not to paint B.
6. However, the browser still keeps B's box in the layout.
7. So C remains below the invisible space where B would have appeared.

Now change this line:

.hidden {
  display: none;
}

New result

1. The browser still creates all three elements.
2. But the second element is removed from layout calculation.
3. Its width, height, and margins no longer take up space.
4. C moves up directly below A.

This is the key execution difference: one hides the drawing, the other removes the box from layout.

When display: none is useful

• Hiding dropdown menus until they are opened
• Showing and hiding modal dialogs
• Conditionally rendering parts of a UI layout
• Hiding mobile navigation until a menu button is pressed
• Removing optional form sections until a user selects a certain option

Example:

.menu {
  display: none;
}

.menu.open {
  display: block;
}

When visibility: hidden is useful

• Keeping table or grid alignment consistent
• Reserving space for content that may appear later
• Temporarily hiding an element without shifting nearby content
• Creating UI states where layout stability matters

Example:

.status-icon.hidden {
  visibility: hidden;
}

This is useful if every row should keep the same spacing whether the icon is visible or not.

In data-heavy interfaces

In dashboards, admin panels, and reports, preserving layout can improve readability. In those situations, visibility: hidden may be better than removing elements entirely.

In real projects, developers usually choose between these based on whether layout should change.

Common patterns

Toggle UI sections

.panel {
  display: none;
}

.panel.active {
  display: block;
}

This is common for tabs, accordions, and menus.

Preserve spacing in repeated components

.badge.is-hidden {
  visibility: hidden;
}

This is common in lists, cards, and tables where aligned spacing matters.

Utility classes

Many codebases create helper classes such as:

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

This makes the intent clear:

• .hidden means remove from layout
• .invisible means keep layout, hide visually

State-based styling

Developers often combine classes with JavaScript:

menu.classList.add('open');
menu.classList.remove('open');

and then use CSS to control whether the element is present in layout.

Guarding against layout shift

In polished interfaces, developers avoid unnecessary movement. If hiding an icon, label, or status marker causes content to jump around, visibility: hidden can be the better choice.

1. Thinking they are synonyms

They are not synonyms.

• display: none removes the element from layout
• visibility: hidden keeps the layout space

2. Expecting visibility: hidden to collapse the gap

Broken expectation:

.notice {
  visibility: hidden;
}

If you expected surrounding elements to move up, this will not happen.

Fix

Use:

.notice {
  display: none;
}

3. Using display: none when layout must stay aligned

Broken result:

.icon.missing {
  display: none;
}

This can make text or rows shift horizontally or vertically.

Better choice

.icon.missing {
  visibility: hidden;
}

4. Forgetting that hidden elements may still affect spacing

A beginner may hide something and wonder why there is still empty space.

.card-label {
  visibility: hidden;
}

That empty area is expected because the element still occupies space.

5. Using the wrong property for animations

display is often awkward for transitions because the element is either present or absent.

Developers often animate opacity instead, sometimes together with visibility.

.tooltip {
  opacity: 0;
  visibility: hidden;
}

.tooltip.show {
  opacity: 1;
  visibility: visible;
}

This is smoother than toggling display directly in many UI cases.

visibility: hidden vs opacity: 0

These are also often confused.

• visibility: hidden hides the element and keeps its layout space
• opacity: 0 makes it fully transparent, but the element still exists visually in layout as normal

In many interfaces, opacity is used for animation, while visibility is used to control whether it should be seen at all.

display vs visibility

• Choose display when the layout should reflow
• Choose visibility when the layout should stay stable

/* Remove from layout entirely */
display: none;

/* Keep layout space, but hide element */
visibility: hidden;

Rules to remember

• display: none:

  • element is not shown
  • element does not take up space
  • surrounding elements can move

• visibility: hidden:

  • element is not shown
  • element still takes up space
  • surrounding elements stay where they are

Good defaults

• Hide menus/modals/sections: display: none
• Hide placeholders/icons while keeping alignment: visibility: hidden

Related quick note

• opacity: 0 also hides visually, but the element still takes up space

Memory trick

• display = does the box participate in layout?
• visibility = can you see the box?

Is visibility: hidden the same as display: none?

No. display: none removes the element from layout, while visibility: hidden keeps its space reserved.

Which one should I use to remove an element from the page layout?

Use display: none if you want nearby elements to move and fill the gap.

Which one should I use if I want to keep the spacing?

Use visibility: hidden if you want the element hidden but still want its space preserved.

Why is there still an empty gap after hiding my element?

You likely used visibility: hidden, which hides the element without removing its layout space.

Can I animate display: none?

Not in the same smooth way as properties like opacity. Developers often animate opacity and sometimes combine it with visibility.

Does opacity: 0 behave like visibility: hidden?

Not exactly. Both can make an element invisible while keeping space, but opacity is mainly about transparency, while visibility is specifically about whether the element is visible.

• display — controls how an element participates in layout.
• visibility — controls whether an element is visible without removing its space.
• opacity — makes elements transparent and is often used in animations.
• CSS box model — helps explain why elements take up space.
• positioning — affects how elements appear and move in layouts.
• flexbox — useful for understanding how hidden items affect flexible layouts.
• grid layout — useful when preserving or removing item space matters in structured layouts.