Using CSS to Style a Site - Web Publishing with HTML and CSS - page 181

. Output

FIGURE 8.6
Both the inner
<div> and outer
<div> have margin
and padding.

8

I gave the outer <div> a large 40-pixel margin so that you could see how it moves the
borders away from the edges of the browser window. Note also that there's now space
between the text in the outer <div> and the border. You can also see that the padding of
the outer <div> and the margin of the inner <div> are combined to provide 30 pixels of
whitespace between the border of the outer <div> and the border of the inner <div> .
Finally, it's important to understand the behavior of the background color. The back-
ground color is applied to the padding but not to the margin. So, the 15-pixel margin out-
side the inner <div> takes on the background color of the outer <div> , and the margin of
the outer <div> takes on the background color of the page.

Collapsing Margins
In the CSS box model, horizontal margins are never collapsed. (If you put two items
with horizontal margins next to each other, both margins will appear on the page.)
Vertical margins, on the other hand, are collapsed. Only the larger of the two vertical
margins is used when two elements with margins are next to each other. For exam-
ple, if a <div> with a 40-pixel bottom margin is above a <div> with a 20-pixel top
margin, the margin between the two will be 40 pixels, not 60 pixels.

You already know that to center text within a box, the text-align property is used. The
question now is this: How do you center a box on the page? In addition to passing units
of measure or a percentage to the margin property, you can also set the margin to auto .
In theory, this means set this margin to the same value as the opposite margin. However,
if you set both the left and right margins to auto , your element will be centered. To do
so, you can use the margin-left and margin-right properties or provide multiple val-
ues for the margin property. So, to center a <div> horizontally, the following style sheet
is used. (The newly centered <div> is in Figure 8.7.)