HTML and CSS Reference
In-Depth Information
Horizontally adjacent elements do not have overlapping margins. In-
stead, the CSS2 model adds together adjacent horizontal margins. For
example, if a paragraph has a left margin of 1 inch and is adjacent to
an element with a right margin of 0.5 inches, the total space between
the two is 1.5 inches. This rule also applies to nested elements so that
a paragraph within a division has a left margin equal to the sum of the
division's left margin and the paragraph's left margin.
As shown in
Figure 8-14
, the total width of an element is equal to the
sum of seven items: the left and right margins, the left and right bor-
ders, the left and right padding, and the element's content itself. The
sum of these seven items must equal the width of the containing ele-
ment. Of these seven items, only three (the element's width and its
left and right margins) can be given the value
auto
, indicating that the
browser can compute a value for that property. When this becomes ne-
cessary, the browser follows these rules:
•
If none of these properties is set to
auto
and the total width is
less than the width of the parent element, the
margin-right
prop-
erty is set to
auto
and made large enough to make the total width
equal to the width of the parent element.
•
If exactly one property is set to
auto
, that property is made large
enough to make the total width equal to the width of the parent
element.
•
If
width, margin-left
, and
margin-right
are set to
auto
, the
CSS2-compliant browser sets both
margin-left
and
margin-right
to
0
and sets
width
large enough to make the total equal to the
width of the parent element.
•
If both the left and right margins are set to
auto
, they are always
set to equal values, centering the element within its parent.
There are special rules for floating elements. A floating element (such as
an image with
align=left
specified) does not have its margins collapsed
with the margins of containing or preceding elements, unless the float-
