14.2. Indenting Text

The text-indent property can be used to indent the first line of an element. For example, to indent the first line of a paragraph by 5 percent of its overall width, you could use code similar to the following (whose results are shown in Figure 14-4):

<p style="text-indent: 5%;">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
acilisi.</p>

The text-indent property indents only the first line of the element to which it is applied. If you want to indent the entire element, use the margin property instead. The margin property is discussed in Chapter 15.

Figure 14-4. Figure 14-4

You can use any of the valid property value metrics in defining the value of the indentation. Note that the user agent's window size can play a significant role in the size of the actual indent if you use values computed from the containing block (percentages, em, and so on).

Possible metrics for CSS properties ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.