HTML and CSS Reference
In-Depth Information
which set the sizes of the top, right, bottom, and left margins, respectively. Here,
length
is a length expressed in one of the CSS units of measure or a percentage of the contain-
ing element's width or height, or the keyword
auto
to allow browsers to automatically
set the margin size for you. For example, the style rule
h1 {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
creates margins of 10 pixels above and below every
h1
element, and margins of 20 pix-
els to the left and right of the heading.
These four margin styles can be combined into the single style
margin:
top right bottom left
;
where
top
,
right
,
bottom
, and
left
are the sizes of the top, right, bottom, and left
margins, respectively. To help remember this order, think of moving clockwise around
the element, starting with the top margin. The style rule
h1 {margin: 10px 20px 10px 20px;}
applies the same set of margins as in the previous code sample.
You don't have to supply values for all of the margins. If you specify a single value, it's
applied to all four sides equally. Likewise, two values set the top/bottom margins and the
right/left margins, respectively. Finally, three values set the margins for the top, right/left,
and bottom, respectively. For example, the style rule
You can overlap page
elements by specifying
negative values for the
margins.
h1 {margin: 10px 20px;}
applies a 10-pixel margin above and below every
h1
element, and a 20-pixel margin to
the left and right. The style rule
h1 {margin: 10px;}
creates a 10-pixel margin around the entire heading.
