CSS Hide Elements

display: none Removes From Flow

Setting display: none takes an element completely out of the page. The browser does not render it, does not reserve any space for it, and screen readers skip it entirely. Everything around the hidden element reflows to fill the gap, exactly as if the element had been deleted from the HTML.

Example: display: none Removes From Flow

<style>
.hidden {
  display: none;
}
</style>
<p>Before</p>
<p class="hidden">Completely removed, no space reserved</p>
<p>After (moves up to fill the gap)</p>

visibility: hidden Keeps the Space

visibility: hidden makes an element invisible but leaves its box exactly where it was, so surrounding content does not reflow. This is the key difference from display: none, and it matters whenever you want to hide something without the layout jumping.

Example: visibility: hidden Keeps the Space

<style>
.hidden {
  visibility: hidden;
}
</style>
<p>Before</p>
<p class="hidden">Invisible but space still reserved</p>
<p>After (does not move up)</p>

opacity: 0 Stays Interactive

opacity: 0 makes an element fully transparent while keeping it in the layout AND keeping it clickable and focusable, unlike the other two methods. This makes it useful for custom-styled form controls where you visually hide the native input but still want it to receive clicks and keyboard focus.

Example: opacity: 0 Stays Interactive

<style>
.transparent {
  opacity: 0;
}
</style>
<button class="transparent">Invisible but still clickable and focusable</button>

Screen Reader and SEO Differences

display: none and visibility: hidden are both skipped by screen readers, so their content is invisible to assistive technology. opacity: 0 content is still announced by screen readers even though sighted users cannot see it, which is a common accessibility mistake when developers assume opacity: 0 behaves like the other two.

Example: Screen Reader and SEO Differences

<style>
.gone { display: none; }
.invisible { visibility: hidden; }
.transparent { opacity: 0; }
</style>
<p class="gone">Skipped by screen readers</p>
<p class="invisible">Skipped by screen readers</p>
<p class="transparent">Still announced by screen readers</p>

Choosing the Right Method

Use display: none when you want an element gone with no trace and no layout gap, such as toggling a mobile menu closed.

Use visibility: hidden when you need the layout to stay stable, such as a table cell that sometimes has no icon. Use opacity: 0 only when you specifically need the element to remain interactive or animatable.

Example: Choosing the Right Method

<style>
.menu-closed { display: none; }
.icon-slot { visibility: hidden; }
.custom-input { opacity: 0; }
</style>
<nav class="menu-closed">Mobile menu, fully gone</nav>
<span class="icon-slot">Icon slot, layout stays stable</span>
<input class="custom-input" type="checkbox">