HTML and CSS Reference
In-Depth Information
Controlling Visibility
As explained in the preceding section, setting an element's
display
property to
none
hides it and all its children
by removing them completely from the flow of the document. The CSS box model also has a
visibility
property, which can be used to hide elements. However, when the
visibility
property is used to hide an
element, it doesn't remove it from the document flow. A space is left where the element would normally be.
Another important difference is that the visibility of child elements can be controlled independently.
he
visibility
property accepts the values listed in Table
6-7
.
Table 6-7.
Values Accepted by the visibility Property
Value
Description
visible
The element is visible. This is the default.
hidden
The element is not visible, but the layout of surrounding elements is not affected. Child elements
are also hidden, but this can be overridden by setting their
visibility
property to
visible
.
collapse
Used only with table elements. See
Chapter 14
for a description.
To demonstrate the difference between using
display
and
visibility
to hide elements, visibility.html
in the ch06 folder is an adaptation of display4.html (see Figures
6-18
and
6-19
). Instead of setting the
display
property to
none
and
block
respectively, the
hide
and
show
classes set the
visibility
property to
hidden
and
visible
like this:
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
When you load visibility.html in a browser, the JavaScript function applies the
show
class to the second
paragraph, which has the ID
details
. This makes the paragraph visible, as shown in Figure
6-20
.
Figure 6-20.
The second paragraph is visible when the page first loads