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

‚  < ‚  Day Day Up ‚  > ‚  

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.

‚  < ‚  Day Day Up ‚  > ‚  


CSS Cookbook
CSS Cookbook, 3rd Edition (Animal Guide)
ISBN: 059615593X
EAN: 2147483647
Year: 2004
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net