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

April 13th, 2010

Ntt.cc

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”.