Recipe 1.13 Setting the Indent in the First Line of a Paragraph

Problem

You want to place an indent in the first line of each paragraph, turning the paragraphs shown in Figure 1-25 to the paragraphs shown in Figure 1-26.

Figure 1-25. The default rendering of the paragraphs

Figure 1-26. The paragraphs with first lines indented

Solution

Use the text-indent property to create the indent:

p {
 text-indent: 2.5em;
 margin: 0 0 0.5em 0;
 padding: 0;
}

Discussion

The text-indent property can take absolute and relative length units as well as percentages. If you use percentages, the percentage refers to the element's width and not the total width of the page. In other words, if the indent is set to 35% of a paragraph that is set to a width of 200 pixels, the width of the indent is 70 pixels.

See Also

The CSS 2.1 specification for more on the text-indent property at http://www.w3.org/TR/CSS21/text.html#propdef-text-indent.