HTML and CSS Reference
In-Depth Information
space to reserve around the element. In addition, the keyword
auto
tells
the styles-conscious browser to revert to the margins it normally would
place around an element. Percentage values are computed as a percent-
age of the containing element's width. The default margin, if not speci-
fied, is 0.
These are all valid margin settings:
body {margin-left: 1in; margin-top: 0.5in; margin-right: 1in}
p {margin-left: -0.5cm}
img {margin-left: 10%}
The first example creates 1-inch margins down the right and left edges
of the entire document and a 0.5-inch margin across the top of the doc-
ument. The second example shifts the left edge of the
<p>
tag 0.5 cen-
timeters left, into the left margin. The last example creates a margin
to the left of the
<img>
tag equal to 10 percent of the parent element's
width.
As you can the shorthand
border
property, you can use the shorthand
margin
property to define all four margins, using from one to four values,
which affect the margins in the order described in
Table 8-1
. Using this
notation, our
<body>
margins in the previous example could also have
been specified as:
body {margin: 0.5in 1in}
The
margin-left
and
margin-right
properties interact with the
width
property to determine the total width of an element, as described earlier
in
section 8.4.7.1
.
All the popular browsers support the margin properties and values.