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

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.

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:

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 {
  : hidden;
}

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

/* 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 is mainly about transparency, while 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.