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

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:

1.
text-indent:

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


2.
10%;

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).

Tip

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


Tip

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