πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
What is the Difference Between visibility: hidden and display: none in CSS?

What is the Difference Between visibility: hidden and display: none in CSS?

Ferenc Almasi β€’ Last updated 2021 August 10 β€’ Read time 2 min read
  • twitter
  • facebook
CSS

Both methods are used to hide elements on a page, but they are fundamentally different, therefore, we must differentiate between the two. When you set visibility to hidden on an element, it is like setting opacity to 0. The box model of the element is invisible but it still affects the layout. Space is still allocated to it.

When you use display: none;, however, the element is completely removed from the document layout. This means you can't tell that there is an invisible element on the page. The document is rendered like the element doesn't even exist.

Copied to clipboard! Playground
<style>
  .invisible { visibility: hidden; }
  .no-display { display: none; }
</style>

<!-- Space will be reserved for this element, however, it will be invisible -->
<img src="hero.jpg" class="invisible" />

<!-- Space won't be reserved for this element, it is completely hidden from the layout -->
<img src="hero.jpg" class="no-display" />
visibility-vs-display.html

Note that when removing an element from the visible layout with either setting visibility to hidden, or display to none, the element will also get removed from the accessibility tree. This means that the element and all of its descendants will be invisible to screen readers too.

We must also point out that when we set an element invisible using visibility, its descendants can be still visible when setting visibility to visible:

Copied to clipboard!
// I am set to hidden, but I still affect the layout
.hidden {
    visiblity: hidden;
    
    // Although my parent is invisible, I can still be visible
    .visible {
        visibility: visible;
    }
}
visibility.scss
What is the Difference Between visibility: hidden and display: none in CSS?
If you would like to see more webtips, follow @flowforfrank

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.