1. Technology

How to Indent Paragraphs with CSS

Using the Text-Indent Property and Adjacent Sibling Selectors

By

A common paragraph style you see in print is where the first line is indented one tab space. You don't see it as much in web pages because browsers, by default, display paragraphs with space between them instead.

To indent paragraphs, use the text-indent style property.

p {
  text-indent: 2em;
}

Customizing the Indents

One way you can specify exactly the paragraphs to indent, you can add a class to the paragraphs you want indented. But that requires that you edit every paragraph to add a class to it.

Instead, you should consider when you indent paragraphs. You indent paragraphs that are directly following another paragraph. To do this, you can use the adjacent sibling selector. With this selector, you are selecting every paragraph that is immediately preceded by another paragraph.

p + p {
  text-indent: 2em;
}

Since you are indenting the first line, you should also make sure that your paragraphs don't have any extra space beteween them. Stylistically, you should either hae space between paragraphs or indent the first line, but not both.

p {
  margin-bottom: 0;
}
p + p {
  margin-top: 0;
}

©2014 About.com. All rights reserved.