HTML and CSS Reference
display property accepts two possible values. A value of inline tells the browser to show the
item, while a value of none means the browser should hide the item.
The second property available for controlling element visibility is called visibility . This
property accepts four possible values, as outlined in Table 1-12.
TABLE 1-12 Values available for the visibility property
Sets the property to visible to show the element
Hides the element
Collapses the element where applicable, such as in a table row
Inherits the value of the visibility property from the parent
Some of these values have interesting behaviors. When you use the display CSS property
and set it to the value of none , the HTML element is hidden. But hiding the element in this
way also removes it from the layout. All the surrounding elements realign themselves as
though the element was not there at all. When display is set to inline , the element is shown
again and all the surrounding elements move out of the way, back to where they were
The visibility CSS property behaves slightly differently. Setting the visibility property to
hidden hides an element, but the hidden element's surrounding elements act as though
it's still there. The space that the element occupied is maintained intact, but the element's
content is hidden. When the property is set back to visible , the element reappears exactly
where it was, without affecting any surrounding elements. The collapse value, on the other
hand, acts more like the display property. If you specify collapse on something such as a table
row, the table rows above and below collapse and take over the space that the collapsed row
was occupying. When you set the visibility property back to visible , the surrounding elements
move out of the way to show the element. This is useful for situations where you want to have
content that can be collapsed or displayed one item at a time to preserve space, such as on
an FAQ, where the answer to a question is shown when a user clicks the question but then
collapsed when the user clicks a different question.
If you need to preserve the page layout when altering visibility, use the visibility property
with the hidden value. If you don't need to preserve the layout, you can either set the
display property to none or set visibility to collapse .