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
The element is visible. This is the default.
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 .
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
Search WWH ::

Custom Search