Indent the First Line of Text

by Stephen Bucaro

Indenting the first line in a paragraph has become almost entirely obsolete in modern typography. In most cases, you should replace indenting the first line with using a blank line between paragraphs. However, there are situations in which you may still wish to indent the first line, for example, in fictional writing.

Use the text-indent property indent the first line in a paragraph. The example below shows how to use inline style to indent the first line of a paragraph by 20 pixels.

<p style="text-indent:20px;">Alice was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"</p>

Alice was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"

Note: Use inline style when you want to apply style to only a single element. If you want to apply style to more than one element, use an embedded style block or a linked style sheet.

You may use any of the other CSS units of measurement with the text-indent property. px (pixels) is an absolute unit of measurement. You may also use relative units of measurement. The example below shows how to indent the first line of a paragraph by 20 percent of the paragraphs width.

<p style="text-indent:20%;">Alice was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"</p>

  When text-indent is used with %, it "defines an indentation in % of the width of the parent element". If you use the text-indent property with % in Internet Explorer, be sure the parent element has an explicit width property applied. I recommend avoiding use of the text-indent property with %.

If you wish to indent the entire paragraph, not just first line, use the margin-left property. The example below shows how to use the margin- left property to indent the entire paragraph by 20 pixels.

<p style="margin-left:20px;">Alice was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"</p>

Alice was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"