HTML and CSS Reference
In-Depth Information
Figure 8-14. The CSS2 formatting model and terminology
The top, bottom, left-outer, and right-outer edges bound the content
area of an element and all of its padding, border, and margin spaces.
The inner-top, inner-bottom, left-inner, and right-inner edges define the
sides of the core content area. The extra space around the element is
the area between the inner and outer edges, including the padding, bor-
der, and margin. A browser may omit any and all of these extra spaces
for any element, and for many, the inner and outer edges are the same.
When elements are vertically adjacent, the bottom margin of the upper
elements and the top margin of the lower elements overlap so that the
total space between the elements is the greater of the adjacent mar-
gins. For example, if one paragraph has a bottom margin of 1 inch, and
the next paragraph has a top margin of 0.5 inches, the greater of the
two margins, 1 inch, is placed between the two paragraphs. This prac-
tice is known as
margin collapsing
and generally results in better docu-
ment appearance.
