• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Indenting Paragraphs

Indenting Paragraphs

At last, the Web can indent paragraphs! Indenting the first word of a paragraph several spaces (traditionally, five) is the time-honored method of introducing a new paragraph.

On the Web, however, indented paragraphs haven't worked because most browsers compress multiple spaces into a single space. Instead, paragraphs have been separated by an extra line break.

Now, with the text-indent property, you can specify extra spaces at the beginning of the first line of text in a paragraph (Figure 4.7).

Figure 4.7. Paragraphs stand out better when they are indented.

To define text indentation in a rule:


Type the property name, followed by a colon (:), in the CSS definition list (Code 4.7).

Code 4.7. The class copy is set up to indent paragraphs of text 10% of the total screen width. So the wider the screen, the wider the indent.

Table 4.8. text-indent Values
Value Compatibility
<length> IE3, N4, CSS1
<percentage> IE3, N4, CSS1


Type a value for the indent, using either of these options (Table 4.8):

  • A length value, such as 2em. This amount will create a nice, clear indent.

  • A percentage value, which indents the text proportionate to the paragraph's width (10%, for example).


You can set the margin of a paragraph to 0 to override the <p> tag's natural tendency to add space between paragraphs.


Because indenting is more common in the print world than online, you may want to consider using indents only for the printer-friendly versions of your page (see "Looking Good in Print [On the Web]" in Chapter 22).

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint