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

The CSS properties for "display" and "visibility" both allow you to hide elements in a page's HTML, but they differ in their implications for its appearance and function. Visibility: hidden hides the tag, but it still takes up space and affects the page. In contrast, display: none removes the tag and its effects for all intents and purposes, but the tag remains visible in the source code. Both approaches are different than simply removing the item(s) in questions from the HTML markup. Let's look at the two in more detail.

Visibility

Using visibility: hidden hides an element from the browser; however, that hidden element still lives in the source code. Basically, visibility: hidden makes the element invisible to the browser, but it still remains in place and takes up the same space had you not hidden it.

For example, if you place a DIV on your page and use CSS to give it the dimensions of 100 by 100 pixels, the visibility: hidden property will hide the DIV, but the text following it will act as though it's still there, respecting that 100 by 100 spacing.

The visibility property is not used very frequently, and certainly not on its own. If you're also using other CSS properties such as positioning to achieve a layout, you might use visibility to hide that item initially, only to reveal it on hover. That's only one possible use of this property, but again, its use is not frequent.

Display

Unlike the visibility property, which leaves an element in normal document flow, display: none essentially removes the element completely from the document. The attached element does not take up any space, even though it's still in the source code. As far as the browser's concerned, the item is gone. This can be useful; it also can be damaging to your page if misused.

Testing a page is a common use for display: none. If you need an area to go away for a bit while you test other areas of the page, display: none gets the job done.

Display: none does find appropriate application in live scenarios, though. For example, if you're building a responsive site, you might include 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're not trying to hide anything for nefarious reasons but have a legitimate need to do so.

For more info on using CSS, check out Lifewire's cheat sheet.