Common Uses of the Margin Properties

One common use of the margin properties is to indent a paragraph from the left and right margins to set it apart from the rest of the text. An example is a quotation. The following code shows how you can do this:

BLOCKQUOTE { margin-left: 4em; margin-right: 4em }

This code applies to all quotations in the entire document.

Another use of the margin property is to provide space between paragraphs to visually distinguish them from each other. Here's the code for inserting space above and below paragraphs using the margin properties:

P { margin-top: 0.5em; margin-bottom: 0.5em }

Figure 8.4 shows a comparison of paragraphs before and after the extra space is added.

Figure 8.4. Adding space above and below paragraphs to distinguish paragraphs from each other; (a) with zero margins; (b) with 0.5em top and bottom margins.

Note: Another way to visually distinguish paragraphs is to indent the first line. We explained how to do this in Chapter 7, when we talked about the text-indent property. When text-indent is used, space above and below paragraphs is usually not necessary. Some people like to do it anyway, but it's a bit of an overkill.

You can also set negative margin values, although some browsers may not be able to handle them. You want to be careful when setting negative values; otherwise, unexpected effects may result. Figure 8.5(a) shows an example of a negative margin that is too large part of the text ends up outside the window. This resulted from input like this, where the text indent was set to -4em:

 BODY { margin-left: 2em } P { text-indent: -4em }

Figure 8.5. Using negative indents with the margin properties: (a) a large negative indent; (b) a negative top margin used to achieve a specific design effect.

Figure 8.5(b) shows a potentially useful negative margin. In this case, we adjust the top margin by -50px:

 <STYLE>   H2.overlap {     margin-top: -0.6em;     font-style: italic; } </STYLE> <H1>Rare flowers> <H2 >-an introduction</H1>

Although the five margin properties allow flexible spatial control, there is no way to control the appearance of margins. Margins are transparent, which means that whatever is underneath shows through. Figure 8.6 shows a child element with a 3em margin on all four sides whose parent has a patterned background. Notice how the pattern shows through and crowds the child element.

Figure 8.6. An element with a white background and a 3em margin. The margins are transparent, so the parent's gray background shows through in the margin area.

To control the appearance of the area immediately around an element, you use the padding and border properties, which we discuss in the next two sections.