What is the Difference Between visibility: hidden and display: none in 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.

<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
Copied to clipboard!

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.

Remove ads

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:

// 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
Copied to clipboard!
What is the Difference Between visibility: hidden and display: none in CSS?
If you would like to see more webtips, follow @flowforfrank

Resources:

Remove ads
Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x 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.