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

Question: What’s the difference between display: none and visibility: hidden?
The display: none and visibility: hidden CSS properties appear to be the same thing, but they aren’t.

Answer:
These two style properties do two different things.

visibility: hidden hides the element, but it still takes up space in the layout.

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.

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.

Source: http://webdesign.about.com/od/css/f/blfaqhidden.htm

This entry was posted in Client Side Programming, CSS, HTML, JavaScript and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s