display:none vs. visibility:hidden

Supplemental 113 views
0
0 Flares 0 Flares ×

This snippet will explain the difference between the CSS commands display:none and visibility:none.

CSS

.element {
    display: none;
}

.element {
   visibility: none;
}

Both of these CSS commands will remove the element in question, however display:none allows other elements to fill up the space where the element has been removed while visibility:hidden keeps any elements from filling up the space where the element has been removed.

Think of a line of people, display:none is someone leaving the line for good, the people behind that person will move up to fill the open space. However visibility:hidden is someone leaving the line but asking the person behind them to save the space for them.

Posted in CSS

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×