Question
In CSS, both visibility: hidden and display: none make an element not appear on the page. Are they equivalent, or do they behave differently in important ways?
Short Answer
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.
Concept
visibility and display control different parts of how an element behaves in the browser.
display: noneremoves the element from the document layout.visibility: hiddenkeeps 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: nonewhen the element should disappear completely from layout - Use
visibility: hiddenwhen the element should be invisible but still occupy space
Mental Model
Think of a page like a row of seats.
display: noneis like removing a chair entirely. The other chairs slide over and fill the space.visibility: hiddenis 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
Syntax and Examples
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 2is removed from layout
Step by Step Execution
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
- The browser reads the HTML and creates three
divelements:A,B, andC. - Each element gets the
.itemstyles.
Real World Use Cases
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.
Real Codebase Usage
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:
.hiddenmeans remove from layout.invisiblemeans keep layout, hide visually
State-based styling
Developers often combine classes with JavaScript:
Common Mistakes
1. Thinking they are synonyms
They are not synonyms.
display: noneremoves the element from layoutvisibility: hiddenkeeps 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;
}
Comparisons
| Property | Element visible? | Space kept in layout? | Common use |
|---|---|---|---|
display: none | No | No | Remove menus, panels, optional sections |
visibility: hidden | No | Yes | Preserve alignment and spacing |
opacity: 0 | No | Yes | Fade effects, animations |
visibility: hidden vs opacity: 0
These are also often confused.
visibility: hiddenhides the element and keeps its layout spaceopacity: 0makes it fully transparent, but the element still exists visually in layout as normal
Cheat Sheet
/* 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: 0also hides visually, but the element still takes up space
Memory trick
- display = does the box participate in layout?
- visibility = can you see the box?
FAQ
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.
Mini Project
Description
Build a simple notification list where some status icons are hidden without breaking alignment, while entire messages can also be completely removed from the layout. This project demonstrates the practical difference between visibility: hidden and display: none in a realistic UI.
Goal
Create a small page that shows how one CSS property preserves spacing and the other removes it completely.
Requirements
- Create three notification rows with a status icon and message text.
- Hide one icon using
visibility: hiddenso the text alignment stays consistent. - Hide one entire notification row using
display: noneso it is removed from layout. - Add simple styles so the layout difference is easy to see.
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.