Understanding the CSS Box Model - Beginning CSS3 - page 117

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.

Tip

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

Property Initial Value Description

overflow visible Controls the horizontal and vertical overflow of a block or inline block.

overflow-x visible Controls the horizontal overflow of a block or inline block.

overflow-y visible

Controls the vertical overflow of a block or inline block.