"HIDDEN" display property versus "NONE"

The "display:" property of CSS stylesheets has a number of useful settings. Most common are "block" and "inline." The DIV tag is an example of a "block" element by default and the SPAN tag is an example of an inline element. But the "HIDDEN" and "NONE" properties deserve some special attention.

display: hidden

When an element is hidden, it takes up space on your screen. You can't see its contents but it takes up the same amount of whitespace that would be necessary to view the element if it was visible.

display: none

When an element has its display property set to "none," not only is that element not visible, but there is not even whitespace set aside for the invisible element. In other words, "display: none" means the element is simply not there.

Subtle difference?

Yes it is subtle but a very important notion to understand. There will be times when you do and times when you don't want whitespace left for an invisible element. At Jewelry Luv, we often make an item "invisible" temporarily. When you hover your mouse cursor over certain elements we'll make the invisible visible. Take a look at our "Flyover Gallery" as a classic example.