1. Technology
Send to a Friend via Email

What's the difference between display: none and visibility: hidden in CSS?

By

CSS Love

CSS Love

Image © 2012 J Kyrnin - licensed to About.com

Question: What's the difference between display: none and visibility: hidden?

The display: none and visibility: hidden cascading style sheet (CSS) properties appear to be the same thing, but they aren't. This article explains the difference.

Answer:

These two style properties do two different things.

visibility: hidden hides the element, but it still takes up space in the layout. In other words, if you place a DIV and 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.

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. In this example, the text following the DIV would move over as if the DIV had been removed from the HTML.

You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. What's the difference between display: none and visibility: hidden in CSS?

©2014 About.com. All rights reserved.