Controlling Space around Elements

CSS' margin attributes apply to more than just the borders of the page. You can apply margins to any element, thereby adjusting the space around it, as in Figure 49.1.

Listing 49.1. View Source for Figure 49.1.

[View full width]

 <p style="margin-bottom: 200px;">This paragraph has a bottom margin of 200 pixels. This is  the end of the paragraph.</p> <p>This is the beginning of the next paragraph, after a healthy stretch of white space.</p> 

Figure 49.1. This paragraph has a bottom margin of 200 pixels, which creates a nice chunk of whitespace to separate the paragraph from what comes after.

TIP

When you space multiple elements with margins, it's usually a good idea to choose either the top or bottom margin and the left or right margin and stick with your choice consistently for each element's style rule. In other words, don't specify the top margin in one element and the bottom margin in another. This way, you don't run into problems if, say, a 200-pixel bottom margin butts up against a 200-pixel top margin, creating an effective gap of 400 pixels.

There are four margin attributes: margin-top, margin-bottom, margin-left, and margin-right. Each can have a different value and unit (see Topic 48 for a table of valid CSS units). As the View Source for Figure 49.1 shows, you don't have to set all four margin attributes. Just specify the margins you need for proper spacing.

TIP

As a shortcut, feel free to use the generic margin attribute. Supplying a single value for this attribute creates equal margins on all four sides of the element, like this:

 margin: 200px; 

You can also give four different values, representing the top, right, bottom, and left margins, respectively, like so:

 margin: 100 50 200 25px;