Section 14.6. Adjusting Paragraph Spacing

14.6. Adjusting Paragraph Spacing

By default, the browser inserts a line break between paragraphs. You know this. You've seen this. You also know from Chapter 6 that you can use CSS to adjust the amount of space that the browser inserts. Here is how it's done.

As before, the same rules apply:

• If you want to modify the spacing of all paragraphs on the site, choose Tag as the selector type from the New CSS Rule dialog box, and type p in the Tag field.

• If you want to modify the spacing of a particular kind of paragraph, choose Advanced as the selector type. Type p, a period (.), and a brief but descriptive name for the style, such as runningtext.

When you get to the CSS Rule Definition dialog box, go to the Box category, and uncheck the Same For All option under Margin. Then supply values for the Top and Bottom fields, as Figure 14-16 shows. These don't have to be the same value, but for a more balanced look, make them the same.

Figure 14-16. To control the space between paragraphs, set values for the top and bottom margins

The less space you insert between paragraphs, the greater the need for you to indent the first line of each paragraph. Otherwise, your text becomes very hard to read. To indent the first line, go to the Block category of the CSS Rule Definition dialog box, and type a value in the Text Indent field, as Figure 14-17 shows.

Figure 14-17. Indent the first line of your paragraphs with the Text Indent field

TIP

The spacing trick works for all kinds of elements, including headings (<h1> through <h6>) and the items in a list (<li>). Just be careful about how you apply it. Book-style paragraphs look great in print, but that extra line space between standard HTML paragraphs helps to improve on-screen legibility.

The sample values create a paragraph style much like the one in Figure 14-18.

Figure 14-18. The text indent is 30 px, and the vertical margins are 2 px

TECHTALK

A horizontal rule is a browser-generated line that runs from left to right on the page.