170 Part III: Adding Artistry: Design and Composition with CSS
To understand how padding, border, and margins interact, think of the job
of hanging paintings in an art gallery. Each painting consists of the actual
canvas area, which is the content in this CSS scenario. Next you can add an
optional matte that separates the outer edge of the canvas from the frame.
A matte is equivalent to the padding in a CSS box. The frame around the
painting is equivalent to the CSS border. Finally, how far apart you hang the
paintings on the wall is equivalent to CSS margins.
The width and height of the content area depends on whether you’ve speci-
fied a value for the widthor heightproperties, whether the content is a
table (or other specialized element), whether the content contains other
boxes or text, and so on.
The width of an element’s box is determined by adding the content width
to any left and right margins, borders, or padding. Likewise, the height of
an element’s box is the sum of the content height, plus any top and bottom
margins, borders, and padding.
The background (visible) styles of the zones of a box are specified using
these properties:
Content area:The element’s backgroundproperty
Padding area:The element’s backgroundproperty
Border area:The element’s borderproperties
Margin area:No background, margins are always transparent
The padding, border, and margins can each be specified with different
values for their top, bottom, left, and right sides. Some of these properties
are padding-top, border-bottom-width, and margin-left.
Margin
The border
Padding
Content
Figure 9-1:
An
element’s
box is
composed
of its
contents,
plus
optional
padding,
border, and
margins.
