HTML and CSS Reference
In-Depth Information
■
Tip
Setting both horizontal margins to
auto
also centers a block-level element that has a
max-width
property.
To center the entire content of a web page, it's common to wrap everything inside the
<body>
in a
<div>
, give
the
<div>
an ID such as
wrapper
, and set its width and horizontal margins like this:
#wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
Alternatively, give the
<body>
a width and set its horizontal margins to
auto
like this:
body {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
Both approaches work equally well in modern browsers. However, giving the
<body>
a width
presents a problem if you want to give the margins a different background unless you also add a
background to the
<html>
element. Although all browsers support styling the
<html>
element separately
from the
<body>
, the CSS3 Borders and Backgrounds module specifically recommends against doing so
(
www.w3.org/TR/css3-background/#special-backgrounds
). The safer approach is to use a wrapper
<div>
.
■
Setting the width of the
<body>
or a wrapper
<div>
to
100%
in combination with
max-width
ensures that
the page fills the full width of the screen on mobile devices, but never grows too wide on a desktop.
Tip
Using Margins to Indent Text
In the past, the
<blockquote>
tag was frequently used to indent text. Apart from using a tag for a purpose that
was never intended, the big limitation of
<blockquote>
is that it creates a 40-pixel margin on both sides of the
text. If you nest
<blockquote>
tags, the text in the center steadily becomes narrower and narrower. Using CSS
margins eliminates that problem, because you can set the margin on each side to the exact amount you want. For
example, you can control the margins on paragraphs like this:
p {
margin-top: 0;
margin-right: 10px;
margin-bottom: 0.5em;
margin-left: 50px;
}
Alternatively, the same margins can be declared using the shorthand property:
p {
margin: 0 10px 0.5em 50px;
}
