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

With the text-indent property (Table 4.9), you can specify extra horizontal space at the beginning of the first line of text in a paragraph (Figure 4.8). You may want to collapse the paragraph margin, in addition, since that space is no longer needed to indicate a new paragraph.

Table 4.9. Text-Indent Values




IE3, FF1, S1, O3.5, CSS1


IE3, FF1, S1, O3.5, CSS1

Figure 4.8. Paragraphs stand out better when they are indented, but the extra white space between them becomes redundant.

To define text indentation:



Type the text-indent property name, followed by a colon (:), in the CSS definition list (Code 4.8).

Code 4.8. The code tells each paragraph using the copy class to indent 2em.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " DTD /xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Indenting Paragraphs</title> <style type="text/css" media="screen"> <!-- body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif; } p.copy {      text-indent: 2em;      margin: 0px; } --> </style> </head> <body> <div >      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <h2>CHAPTER VII<br />         <span >A Mad Tea-Party</span></h2> </div> <p >There was a table set out under a tree in front of the house, and the  March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast  asleep, and the other two were using it as a cushion, resting their elbows on it, and  talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as  it's asleep, I suppose it doesn't mind.'</p> </body> </html>



Type a value for the indent, using either of these options:

  • A length value, such as 2em. This amount will create a nice, clear indent. See "Values and Units Used in this Book" in the Introduction for more details.

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


  • If you are using indentation to indicate paragraphs, 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.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230 © 2008-2017.
If you may any questions please contact us: