HTML and CSS Reference
In-Depth Information
The word “only” is wrapped in <i> tags, making it a child element of the details paragraph. A separate style
rule sets its visibility property to visible like this:
#details i {
visibility: visible;
When you click “Hide details,” the JavaScript function sets the class of the second paragraph to hide , setting
its visibility property to hidden . However, the page layout remains unchanged. Moreover, as Figure 6-21
shows, “only” remains visible because it's controlled by a separate style rule.
Figure 6-21. The child element and page layout are not affected
Beginners often confuse visibility and display because both hide elements, but in very different ways.
Remember that visibility doesn't remove an element from the document flow, whereas display does.
Handling Content That's Too Big
Browsers automatically wrap text when it reaches the specified width or at the right edge of the browser window
if no width is specified. But what if you've specified a height and the text is too long, or if you use an image that's
too big for the containing element? By default, the content spills over. To control content that's too big for its
container, use one of the properties listed in Table 6-8 .
Table 6-8. Properties that Control Overflow
Initial Value
Controls the horizontal and vertical overflow of a block or inline block.
Controls the horizontal overflow of a block or inline block.
Controls the vertical overflow of a block or inline block.
Search WWH ::

Custom Search