With visibility:hidden, the element still takes up space. With display:none, it is effectively removed from the DOM.
Hiding DOM elements with CSS is a common task. Some wonder whether they should use visibility:hidden or display:none. So, let’s think about Visibility hidden vs display none. Before you decide, the question to ask yourself is: “do I want the element to still have a physical effect on the DOM? or do I want the element to feel as if it has been removed from the page?”. This is an important question. The difference between visibility:hidden and display:none in CSS is how the hidden element affects the DOM.
When visibility:hidden is applied to an HTML element, it is not visible in the page, which makes sense. But the critical thing to keep in mind is: this HTML element still has an effect on the DOM. In fact, the HTML element affects the DOM as if it were still visible. Now this may seem like an odd feature, i.e., if you don’t want something visible, then why would you want it to still affect the DOM? Well, I can state without hesitation that I have actually found myself in situations in which this behavior was exactly what I needed. So, just remember that while it may seem odd, visibility:hidden does offer a very particular value when you need it.
On the other hand, when display:none is applied to an HTML element, it is not visible in the page, and this too makes perfect sense. In this case, however, the element has no effect on the DOM, and as far as the other elements around it are concerned, it simply does not exist. This is an important detail because with display:none, you are effectively removing the element from the DOM. At the same time, however, you have complete access to that element, and you can mutate it, style it, or even change the display value so that it is visible in the DOM again. The most common values for the CSS display property are “block”, “inline” and “inline-block”.
Visibility hidden vs display none – Example
Example # 1 – visibility:hidden
See the Pen CSS Visibility Hidden by Front End Video (@frontendvideo) on CodePen.
In Example # 1, There is a whole bunch of text, and right in the middle of it is an image. The image has visibility:hidden set in its CSS. As a result, we have an empty box. That empty box represents the space that the image takes up in the DOM. So, the image very much still exists. But from a visual standpoint, it has been hidden from view. So with visibility:hidden, just keep in mind: “it’s still there, but we can’t see it”.
And it’s not just that “it’s still there.” it actually affects the DOM. That hidden element literally pushes other elements over and down just as if it were visible. So, as you can imagine, if you are not clear about how visibility:hidden works, you can wind up pulling your hair out, trying to figure out why a hidden element is still affecting the DOM. Just keep in mind: visibility:hidden does not negate that element’s effect on the other elements around it.
Example # 2 – display:none
See the Pen CSS Visibility Hidden by Front End Video (@frontendvideo) on CodePen.
In Example # 2, things are similar: there is a whole bunch of text, and right in the middle of it is an image. The image has display:none set in its CSS. But this time, there is no empty box. This is because the element no longer has any effect on the DOM. The image very much still exists, but it has not only been hidden from view, it no longer affects the document flow. So with display:none, just keep in mind: “it’s as if it has been completely removed from the page”.
But again, while the element feels as if it has been removed from the DOM, you still have complete access to it. You can manage that element just as you would any other. The only difference is: as long as it has display:none applied, it will feel as if it no longer exists (both visually and physically).
Summary
So, remember: when comparing visibility:hidden and display:none, the most important question to ask is: “do I want the element to still have an effect on the DOM?” Once you’ve answered that, you can proceed with the knowledge that you can hide an HTML element in one of two ways. In one case, that element still has a physical effect on the other elements around it (visibility:hidden), while in the other, the element will feel as if it has been completely removed (display:none).