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.
[View full size image]
TIPWhen 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. |
TIPAs 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: You can also give four different values, representing the top, right, bottom, and left margins, respectively, like so:
|