HTML and CSS Reference
In-Depth Information
Example 3.22: disappearing an element by using the
display
property
(continued)
</head>
<body>
<a href="#">
Something is missing.
</a>
<p>
The following sentence is false.
</p>
<p>
The previous sentence is true.
</p>
</body>
</html>
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
