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?"
Note: An alternative way to indent an entire paragraph is to use the html
<blockquote> element. The <blockquote> element has inherent left and
right margins. If your goal is to indent all the text on a page, you might
consider setting it in the <body> tag using the html leftmargin
attribute, as shown below.
<body leftmargin=20>
<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?"</p>
Many webmaters consider the use of html attributes to be outdated, as apposed
to using style properties, and in fact many html attributes may be "depricated"
in future versions of html. On the other hand, old browsers don't understand, or
are inconsistent in the use of style properties.
More CSS Quick Reference:
• Set the Text Decoration
• Grouped Selectors
• Set an Element's Padding
• Set the Type of Bullet Used in List
• position:fixed
• Set the Word Spacing
• How to Use a CSS ID Selector
• Set the Font Size
• Pseudo-class Selectors
• Set the border-collapse
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
