Tips: What’s The Difference Between “Display” And “Visibility” Properties In CSS? - Ntt.cc

Tips: What’s The Difference Between “Display” And “Visibility” Properties In CSS?

bluetooth-Vista-icon There are two properties in CSS which can be used for selectively hiding and revealing information: the Visibility and Display properties. They may seem to do the same thing on the surface, but in fact, they are very different and often confuse those new to web development. What’s the difference between display: none and visibility: hidden?

These two style properties do two different things. The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Let’s see the properties of display and visibility first.

display Property Values


Value Description
none The element will generate no box at all
block The element will generate a block box (a line break before and after the element)
inline The element will generate an inline box (no line break before or after the element). This is default
inline-block The element will generate a block box, laid out as an inline box
inline-table The element will generate an inline box (like <table>, with no line break before or after)
list-item The element will generate a block box, and an inline box for the list marker
run-in The element will generate a block or inline box, depending on context
table The element will behave like a table (like <table>, with a line break before and after)
table-caption The element will behave like a table caption (like <caption>)
table-cell The element will behave like a table cell
table-column The element will behave like a table column
table-column-group The element will behave like a table column group (like <colgroup>)
table-footer-group The element will behave like a table footer row group
table-header-group The element will behave like a table header row group
table-row The element will behave like a table row
table-row-group The element will behave like a table row group
inherit Specifies that the value of the display property should be inherited from the parent element

 

visibility Property Values


Value Description
visible The element is visible. This is default
hidden The element is invisible (but still takes up space)
collapse Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as "hidden"

inherit Specifies that the value of the visibility property should be inherited from the parent element

We can know from above:

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

and

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.

Notice: if the display property is not explicitly set, it defaults to the display type the element normally has.

You also can refer here to see how they look “Set visibility: hidden on the image” and “Set display: none on the image”. :)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

Leave a Reply