HTML and CSS Reference
In-Depth Information
■
it's been many years since opera stopped using padding on the
<body>
element. However, setting its
value to zero does no harm.
Note
Centering Block-level Elements
As you learned in
Chapter 4
, you center text elements using the
text-align
property and setting its value to
center
. The draft CSS3 box model proposes introducing a similar property, tentatively called
alignment
or
block-align
, for block-level elements. But until the specification is implemented by browsers, you center a
block-level element by giving it a declared width and setting the left and right margins to
auto
.
The styles in centered.html in the ch06 folder set the
width
of a
<div>
to
400px
, and use the
margin
shorthand property to set its top and bottom margins to
20px
and left and right margins to
auto
like this:
#centered {
background-color: #FFF;
border: 2px solid #999;
width: 400px;
margin: 20px auto;
padding: 20px;
}
As Figure
6-7
shows, the
<div>
remains centered regardless of the size of the browser window.
Figure 6-7.
Specifying a width and setting horizontal margins to auto centers a block-level element
