visibility vs display:none
Both `display: none` and `visibility: hidden` hide an element, but they differ significantly in how they affect document flow and space allocation.
element { display: none; }
element { visibility: hidden; }This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
Both `display: none` and `visibility: hidden` hide an element, but they differ significantly in how they affect document flow and space allocation.
When it comes to hiding elements in CSS, `display: none` and `visibility: hidden` are two common approaches, but they operate very differently and are suited for different scenarios.
**`display: none;`** - **Removes from flow**: The element is completely removed from the document flow. It takes up no space on the page, and the layout behaves as if the element never existed in the HTML. - **Not rendered**: The element and its descendants are not rendered at all. - **Not interactive**: The element is not clickable, focusable, or accessible to screen readers. - **Performance**: Generally good for hiding large sections as the browser doesn't render them. - **Use case**: When you want to completely remove an element from the layout and its presence should have no impact on other elements, such as toggling UI components (e.g., a modal that appears/disappears).
**`visibility: hidden;`** - **Retains space**: The element remains in the document flow and still occupies its original space. It's as if the element is transparent or invisible, but its box model dimensions still affect the layout of surrounding elements. - **Not rendered (visually)**: The element is not visually displayed, but its box is still there. - **Not interactive**: The element is not clickable or focusable, and screen readers may or may not announce its presence depending on the browser/reader combination. - **Performance**: Can be slightly less performant than `display: none` for complex elements, as the browser still calculates its layout. - **Use case**: When you want to hide an element but preserve its space in the layout, preventing other elements from shifting, such as a placeholder for an animation or a temporary hidden state that will be revealed without layout reflows.
Choosing between the two depends on whether you need to preserve the element's space in the layout or completely remove it.
Quick reference
Syntax
element { display: none; }
element { visibility: hidden; }See it in practice
Examples
Hiding with `display: none`
<style>
.box {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 5px;
}
.hidden-display {
display: none;
}
</style>
<div class="box">Box 1</div>
<div class="box hidden-display">Hidden Box</div>
<div class="box">Box 2</div>Box 1 and Box 2 will appear stacked, with no space between them for 'Hidden Box'.
The `hidden-display` box is completely removed from the layout, and `Box 2` shifts up to take its place.
Hiding with `visibility: hidden`
<style>
.box {
width: 100px;
height: 50px;
background-color: lightgreen;
margin: 5px;
}
.hidden-visibility {
visibility: hidden;
}
</style>
<div class="box">Box 1</div>
<div class="box hidden-visibility">Hidden Box</div>
<div class="box">Box 2</div>Box 1 and Box 2 will appear stacked, but there will be an empty space between them where 'Hidden Box' would have been.
The `hidden-visibility` box is invisible but still occupies its space in the layout, causing `Box 2` to remain below that empty space.
Dynamic hiding with JavaScript
<style>
.box {
width: 100px;
height: 50px;
background-color: lightyellow;
margin: 5px;
}
</style>
<div class="box" id="toggleBox">Click to toggle</div>
<div class="box">Another Box</div>
<button onclick="
const box = document.getElementById('toggleBox');
box.style.display = (box.style.display === 'none' ? 'block' : 'none');
">Toggle Display</button>
<button onclick="
const box = document.getElementById('toggleBox');
box.style.visibility = (box.style.visibility === 'hidden' ? 'visible' : 'hidden');
">Toggle Visibility</button>Two boxes. Clicking 'Toggle Display' will make the first box appear/disappear, affecting layout. Clicking 'Toggle Visibility' will make it appear/disappear, but its space will remain.
This demonstrates how JavaScript can dynamically switch between `display: none` and `block` (or `visibility: hidden` and `visible`) to control element visibility and its impact on layout.
Debug faster
Common Errors
Unexpected Layout Shift
Cause: Using `display: none` when the intention was to hide an element while preserving its space, leading to other elements shifting unexpectedly.
Fix: If you need to hide an element but want it to still occupy its space in the layout (e.g., for animations or maintaining alignment), use `visibility: hidden;` instead of `display: none;`.
<div style="display: none;">This content disappears and causes a reflow.</div>Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
Both `display: none` and `visibility: hidden` hide an element, but they differ significantly in how they affect document flow and space allocation.
Unexpected Layout Shift: If you need to hide an element but want it to still occupy its space in the layout (e.g., for animations or maintaining alignment), use `visibility: hidden;` instead of `display: none;`.