Difference Between "Display: None" and "Visibility: Hidden" in CSS

Two screens with websites

There may be times, as you work on the development of web pages, that you need to "hide" specific areas of items for one reason or another. You could, of course, simply remove the item(s) in questions from the HTML markup, but what if you want them to remain in the code, but not display on the browser screen for whatever reason (and we will review the reasons to do this shortly). To keep an element in your HTML, but hide it for display, you would turn to CSS.

The two most common ways to hide an element that is in the HTML would be using the CSS properties for "display" or "visibility". At first glance, these two properties may seem to do largely the same thing, but they each have distinct differences that you should be aware of. Let's take a look at the differences between

display: none


visibility: hidden


Using the CSS property/value pair of

visibility: hidden

hides an element from the browser. However, that hidden element still takes up space in the layout. It's like you have basically made the element invisible, but it still remains in place and takes up the space it would have taken up had it been left alone.

If you place a DIV on your page and use CSS to give it dimensions to take up 100x100 pixels, the

visibility: hidden

property will make the DIV not show on the screen, but the text following it will act like it's still there, respecting that 100x100 spacing.

The visibility property is not something we used very frequently, and certainly not on its own. If we are also using other CSS properties like positioning to achieve the layout we wanted for a certain element, we could then use visibility to hide that item initially, only to "turn" it back on hover. That is one possible use of this property, but again, it is not something we turn to with any frequency.


Unlike the visibility property, which leaves an element in normal document flow,

display: none

removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. This is because it is, indeed, removed from the document flow. For all intents and purposes, the item is gone. This can be a good thing or a bad thing, depending on what your intentions are. It can also be damaging to your page if you misuse this property!

We often use "display: none" when testing a page. If we need an area to "go away" for a bit while so that we can test other areas of the page, we can use "display: none" for that. The thing to remember, however, is that the element should be returned back to the page prior to the actual launch of that site. This is because an item that is removed from document flow in this method is not seen by search engines or screen readers, even though it may remain in the HTML markup. In the past, this method was used as a black-hat method to try to influence search engine rankings, so items that are not displayed could be a red flag for Google to look into why that approach is being used.

One way we do find "display: none" to be useful, and where we do use it on live, production websites, is when we are building a responsive site that may have elements that are available for one display size but not for others. You can use "display: none" to hide that element and then turn it back on with media queries later. This is an acceptable use of "display: none" because you are not trying to hide anything for nefarious reasons, but have a legitimate need to do so.