HTML and CSS Reference
In-Depth Information
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
Value
Effect
Sets the property to
visible
to show the element
visible
Hides the element
hidden
Collapses the element where applicable, such as in a table row
collapse
Inherits the value of the
visibility
property from the parent
inherit
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
originally.
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.
EXAM TIP
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
.
Search WWH ::
Custom Search