HTML and CSS Reference
In-Depth Information
Example 3.22: disappearing an element by using the display
property (continued)
<a href="#"> Something is missing. </a>
<p> The following sentence is false. </p>
<p> The previous sentence is true. </p>
Figure 3.22 shows how this code is displayed in two browser windows. In
the window on the right, the mouse is on the link, and the mouse button is
held down, causing the irst paragraph to disappear.
Figure 3.22: Changing the display property of a sibling element using the
:active pseudo-class
Changing an element's display property from block to none has the efect of
making it look as if the element never existed on the page. he content follow-
ing the element is moved up to occupy the space the element once occupied.
Of course, the element still exists and can be accessed by scripting methods.
If the visibility property were used in Example 3.22 instead
a:active + p { visibility: hidden; }
the paragraph ater the link still disappears, but the space it occupied remains.
he inal paragraph does not move up to take its place.
Setting a block element's display property to the value inline-block instructs
the browser to treat the element the same way an inline image is treated. he
element loses its margins to become part of the content low of its parent ele-
ment but keeps its other box properties, including height , width , padding , and
Search WWH ::

Custom Search