TechNote (Archived)

Using CSS to modify the spacing between paragraphs or lines of text

In most HTML editors (including Dreamweaver), paragraphs have a line of blank space separating them. This line of space displays automatically when you press Enter or Return. Sometimes, however, you may wish to modify or eliminate this line of space between paragraphs. For example, you may want to designate paragraphs by simply indenting them. Understanding how text in the tag is rendered and learning about the options available with the tag and Cascading Style Sheets (CSS) will provide you with this additional control over text spacing.

The tag
Text typed in an HTML editor will frequently exist within a tag in the HTML source code. As with all HTML tags, there are certain conventions that a browser follows when rendering the tag. One of the most common conventions in displaying the tag is that the browser includes a line of space between paragraphs. Developers can override this convention using CSS. Moreover, the text contained within the tag has a certain line height (or, in word processing terminology, leading) which you may wish to adjust for your own design purposes.

Altering the spacing in and around paragraphs in Macromedia Dreamweaver
Dreamweaver encloses the text you are typing with the tag as soon as you press Enter or Return. This causes the cursor to start a new line after creating a line of space. (In contrast, pressing Enter in a word processing or desktop publishing program generally causes the cursor to return to the very next line.) This TechNote explores a few of the options you have to modify the spacing of lines of text and paragraphs, including:

	Starting a new line of text with the <br> tag
	Modifying the spacing by altering the <p> tag with CSS
	Modifying the spacing in an individual <p> tag with a custom style
	Modifying the leading among the lines of text in paragraph with CSS

Starting a new line of text with the tag
A common way to start a new line of text is to insert the tag within the tag. This will have the same effect, in word processing terms, of creating a soft return ; a new line of text starts without an added line of space. Nonetheless, the text in the new line is still part of the same tag and inherits all the properties associated with that tag. You can add a tag by pressing Shift+Enter (Shift+Return on the Macintosh) while typing or by choosing Insert > Special Characters > Line Break.See how the various paragraphs (with and without the tag) display in Example 1.

Note:Text will wrap within its container ; whether that container is a table cell or the body itself. Therefore, developers should avoid using either paragraphs or line breaks to force the wrapping of text since the text may wrap at a different place for different visitors.

Modifying the spacing by altering the tag with CSS
It is possible to redefine, with CSS, regions around an element which control how close other elements are displayed. Although there are various methods to achieve similar results, the steps below illustrate how to create a CSS style which will set the bottom and top margin of content in the tag to 0. This strategy eliminates the space between all paragraphs in your document.

Note:To become more familiar with the many benefits of CSS Styles, see An Overview of Cascading Style Sheets (TechNote 15230).

1	Choose Text > CSS Styles > New Style. Or, choose Window > CSS Styles to open the CSS Styles panel, then click the New Style button.
2	In the New Style dialog box, select This Document Only under Define in.
3	Select Redefine HTML Tag under Type.
4	Choose an HTML tag to redefine by clicking in the tag pop-up menu. To follow the example in these instructions, choose <p> in the list of HTML tags.
5	Click OK. The Style Definition dialog box appears.
6	In the Style Definition dialog box, select the Box category.
7	The following settings in the Box category will cause the paragraphs to have very little space between paragraphs: Margin section Top: 0 Right: Bottom: 2 Left: Note:You may want to experiment with other numbers and settings to achieve a desired effect.
8	Indenting paragraphs If you will be displaying a long series of paragraphs and you are eliminating the space between the paragraphs, you may also want to indent the first sentence of each paragraph. Otherwise, it may be difficult to tell when one paragraph ends and another begins in the browser. You can add this modification to the <p> tag with CSS Styles. Click the Block category in the Styles Definition dialog box. Type a number in the Text Indent text box (7 pixels is a good starting point). Note:Dreamweaver will not display the indentations; to see the indented paragraphs, preview the document in a browser.
9	Click OK.
10	Click Done. The appearance of the text within the <p> tag on that page will change automatically.

Note:This style will be embedded within the HTML document you are working with. You can also put the style in an external style sheet, which can be linked to in other HTML documents in your site. To learn more about creating external style sheets, see How to create an external Cascading Style Sheet (TechNote 12922).

Modifying the spacing in an individual tag with a custom style
You can also create a custom style and then apply it to paragraphs individually rather than redefining the tag properties globally.

1	Choose Text > CSS Styles > New Style. Or, choose Window > CSS Styles to open the CSS Styles panel, then click the New Style button.
2	In the New Style dialog box, select This Document Only under Define in.
3	Type a name, such as .nospace, in the Name text box.
4	Select Make Custom Style (class) under Type.
5	Click OK. The Style Definition dialog box appears.
6	In the Style Definition dialog box, select the Box category.
7	The following settings in the Box category will cause any elements with this style applied to display very little margin above or below it: Margin section Top: 0 Right: Bottom: 2 Left: Note:You may want to experiment with other numbers and settings to achieve a desired effect.
8	Click OK. The nospace style will appear on the CSS Styles panel.
9	In Design view, click inside the textual content of a <p> tag. Select the<p> tag from the Tag selector (the list of tags found at the bottom left of the Design window).
10	Select the nospace style from the Styles panel. Note:If the text in the<p> tag is above another <p> tag, you may have to apply the nospace style to the <p> tag below as well, to eliminate the space between the two lines (compare Example 2 with Example 3 ). If the text in the <p> tag is above an image or a table, however, applying the nospace style to the <p> tag should eliminate the space between those two elements (see Example 4 ).

Modifying the line height among the lines of text in paragraph with CSS
You may also be interested in controlling the spacing between the lines of text within the same tag. This can also be achieved using CSS Styles. Below you'll find steps to create a Custom Style which can be applied to individual paragraphs. (You can use the same Line Height setting to redefine the tag, as described above).

1	Choose Text > CSS Styles > New Style. Or, choose Window > CSS Styles to open the CSS Styles panel, then click the New Style button.
2	In the New Style dialog box, select This Document Only under Define in.
3	Type a name, such as .lineheight, in the Name text box.
4	Select Make Custom Style (class) under Type.
5	Click OK. The Style Definition dialog box appears.
6	In the Style Definition dialog box, select the Type category.
7	In the Line Height pop-up menu, select value. With the word value still selected, type 150. In the pop-up menu to the right of the Line Height text box, select % (see the dialog box in Example 5 ). Note:You may want to experiment with other numbers and settings to achieve a desired effect.
8	Click OK. The lineheight style will appear on the CSS Styles panel.
9	In Design view, click inside the textual content of a <p> tag. Select the<p> tag from the Tag selector (the list of tags found at the bottom left of the Design window).
10	Select the lineheight style on the Styles panel. The "leading" will now increase so that the text has a less dense look (as illustrated in Example 6).

Additional information
Consult the TechNotes and articles listed in the Using Cascading Style Sheets section of the Dreamweaver Support Center for more information.