HTML and CSS Reference
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
• 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-