CSS: The Definitive Guide, 3rd Edition (32 page)

As we discussed in
Chapter 7
, all document
elements generate a rectangular box called the
element box
, which
describes the amount of space that an element occupies in the layout of the document.
Therefore, each box influences the position and size of other element boxes.
For example, if the first element box in the document is
an inch tall, the next box will begin at least an inch below the top of the document. If
the first element box is changed to two inches tall, every following element box will
shift downward an inch, and the second element box will begin at least two inches below
the top of the document, as shown in
Figure
8-1
.

Figure 8-1. How one element affects all elements

By default, a visually rendered document is composed of a number of rectangular boxes
that are distributed such that they don't overlap one another. Also, within certain
constraints, these boxes take up as little space as possible, while maintaining a
sufficient separation to make clear which content belongs to which element.

To fully understand how margins, padding, and borders are handled, you must clearly
understand the box model (also explained in
Chapter
7
). For reference, I'll include the box model diagram from that chapter (see
Figure 8-2
).

Figure 8-2. The CSS box model

a:link {color: red; background: silver; height: 15px; width: 60px;}

Margins Versus Padding

Element boxes provide only small amounts of space
between elements. There are three ways to generate additional space around elements:
you can add padding, margins, or a combination of padding and margins. Under certain
circumstances, the choice doesn't really matter. If an element has a background,
however, your decision is already made, because the background will extend into the
padding but not the margin.

Thus, the amount of padding and margin you assign to a given element will
influence where the background of the element will end. If you set background colors
for the elements involved, as illustrated in
Figure 8-3
, the difference becomes clear. The elements with padding have
extra background, as it were, whereas those with margins do not.

Figure 8-3. Paragraphs with different margins and padding, with backgrounds to illustrate
the differences

In the end, deciding how to set margins and padding is up to the designer, who
must weigh the various possibilities against the intended effect and pick the best
alternative. To make these choices, of course, it helps to know which properties you
can use.

Figure 8-4. Paragraphs with and without margins

margin

Figure 8-5. Setting a margin for h1 elements

As stated
before, any length value can be used in setting the margins of an element. It's
simple enough, for example, to apply a 10-pixel whitespace around paragraph elements.
The following rule gives paragraphs a silver background and a 10-pixel margin, as
shown in
Figure 8-6
:

p {background-color: silver; margin: 10px;}

Figure 8-6. Comparative paragraphs

(Again, the background color helps show the content area, and the dashed lines are
for illustrative purposes only.) As
Figure
8-6
demonstrates, 10 pixels of space have been added to each side of the
content area. The result is somewhat similar to using the
hspace
and
vspace
attributes in
HTML. In fact, you can use
margin
to set extra
space around an image. Let's say you want one em of space surrounding all images:

img {margin: 1em;}

That's all it takes.

At times, you might prefer a different amount of space on each side of an element.
That's simple as well. If you want all
h1
elements
to have a top margin of 10 pixels, a right margin of 20 pixels, a bottom margin of 15
pixels, and a left margin of 5 pixels, here's all you need:

h1 {margin: 10px 20px 15px 5px;}

The order of the values is important, and follows this pattern:

margin:
top right bottom left

A good way to remember this pattern is to keep in mind that the four values go
clockwise around the element, starting from the top. The values are
always
applied in this order, so to get the effect you want, you
have to arrange them correctly.

It's also possible to mix up the types of length value you use. You aren't
restricted to using a single length type in a given rule, as shown here:

h2 {margin: 14px 5em 0.1in 3ex;}  /* value variety! */

Figure 8-7
shows you, with a little extra
annotation, the results of this declaration.

Figure 8-7. Mixed-value margins

As I mentioned earlier, it's possible to set percentage values for
the
margins of an element. Percentages are computed in relation to the width of the
parent element, so they change if the parent element's width changes in some way. For
example, assume the following, which is illustrated in
Figure 8-8
:

p {margin: 10%;}

This paragraph is contained within a DIV that has a width of 200 pixels,
so its margin will be 10% of the width of the paragraph's parent (the DIV).
Given the declared width of 200 pixels, the margin will be 20 pixels on
all sides.



This paragraph is contained within a DIV with a width of 100 pixels,
so its margin will still be 10% of the width of the paragraph's parent.
There will, therefore, be half as much margin on this paragraph as that
on the first paragraph.

Figure 8-8. Parent widths and percentages

By contrast, consider the case of elements without a declared
width
. In such cases, the overall width of the element
box (including margins) is dependent on the
width
of the parent element. This leads to the possibility of "fluid" pages, where the
margins of elements enlarge or reduce to match the actual size of the parent element
(or display canvas). If you style a document so that its elements use percentage
margins, the margins will expand or shrink to fit as the user changes the width of a
browser window. The design choice is up to you.

You may have noticed something odd about the paragraphs in
Figure 8-8
. Not only did their side margins
change according to the width of their parent elements, but so did their top and
bottom margins. That's the desired behavior in CSS. Refer back to the property
definition, and you'll see that percentage values are defined to be relative to the
width
of the parent element. This applies to the top and
bottom margins, as well as to the left and right. Thus, given the following styles
and markup, the top margin of the paragraph will be
50px
:

div p {margin-top: 10%;}

This is a paragraph, and its top margin is 10% the width of its parent
element.

If the
width
of the
div
changes, the top margin of the paragraph will, too. Seem strange?
Consider that most elements in the normal flow are (as we are assuming) as tall as
necessary to contain their descendant elements, including margins. If an element's
top and bottom margins were a percentage of the parent, an infinite loop could result
where the parent's height was increased to accommodate the top and bottom margins,
which would then have to increase to match the new height, and so on. Rather than
simply ignore percentages for top and bottom margins, the specification authors
decided to make it relate to the width of the parent, which does not change based on
the width of its descendants.

It's also possible to mix percentages with length values. Thus, to set
h1
elements to have top and bottom margins of one-half
em, and side margins that are 10 percent of the width of the browser window, you can
declare the following, illustrated in
Figure
8-9
:

h1 {margin: 0.5em 10% 0.5em 10%;}

Figure 8-9. Mixed margins

Here, although the top and bottom margins will stay constant in any situation, the
side margins will change based on the width of the browser window. Of course, we're
assuming that all
h1
elements are children of the
body
element and that
body
is as wide as the browser window. Plainly stated, the side margins
of
h1
elements will be 10 percent of the width of
the
h1
's parent element.

Let's revisit that rule for a moment:

h1 {margin: 0.5em 10% 0.5em 10%;}

Seems a little redundant, doesn't it? After all, you have to type in the same pair
of values twice. Fortunately, CSS offers an easy way to avoid this.