How to Indent Paragraphs With CSS

Using the text-indent property and adjacent sibling selectors

Type blocks

Grant Faint / Getty Images

Good web design is often about good typography. Since so much of a web page's content is presented as text, being able to style that text to be both attractive and effective is an important skill to possess as a web designer. Unfortunately, we do not have the same level of typographic control online that we do in print. This means that we cannot always reliably style text on a website in the same way that we could do so in a printed piece.

One common paragraph style that you do see often in print (and which we can recreate online) is where the first line of that paragraph is indented one tab space. This allows readers to see where one paragraph begins and another ends.

You don't see this visual style as much in web pages because browsers, by default, display paragraphs with space underneath them as a way to show where one ends and another begins, but if you want to style a page to have that print-inspired indent style on paragraphs, you can do so with the text-indent style property.

The syntax for this property is simple. Here is how you would add a text-indent to all the paragraphs in a document.

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. That is inefficient and does not follow HTML coding best practices.

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 between them (which is the browser default). Stylistically, you should either have space between paragraphs or indent the first line, but not both.

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

Negative Indents

You can also use the text-indent property, along with a negative value, to cause the start of a line to go to the left as opposed to the right like a normal indent. You may do this if a line begins with a quotation mark so that the quote character appears in the slight margin to the left of the paragraph and the letters themselves still form a nice left alignment. 

Say, for instance, that you have a paragraph that is a descendant of a blockquote and you want it to be negatively indented. You could write this CSS:

blockquote p {
text-indent: -.5em;
}

This would give the start of the paragraph, which presumably includes the opening quote character, to be slightly moved to the left to create hanging punctuation.

Regarding Margins and Padding

Oftentimes in web design, you use margin or padding values to move elements and create white space. Those properties will not work to achieve the indented paragraph effect, however. If you apply either of these values to the paragraph, the entire text of that paragraph, including every line, will be spaced instead of just the first line.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Indent Paragraphs With CSS." ThoughtCo, Jul. 31, 2021, thoughtco.com/how-to-indent-paragraphs-with-css-3467086. Kyrnin, Jennifer. (2021, July 31). How to Indent Paragraphs With CSS. Retrieved from https://www.thoughtco.com/how-to-indent-paragraphs-with-css-3467086 Kyrnin, Jennifer. "How to Indent Paragraphs With CSS." ThoughtCo. https://www.thoughtco.com/how-to-indent-paragraphs-with-css-3467086 (accessed March 29, 2024).