How to Indent Text, Paragraphs, Lists & More in CSS

There are different ways you can make a web page easier to read, skim, and digest. Adding images is a great way. Drop caps can also work.

Indentation is another formatting technique that can help organize and present content on the page. Although it’s much more common in print, paragraphs, lists, and bullet points can be intended to break up content on web pages and improve their readability.

In this post, we’ll walk through how you can indent different elements with CSS. We’ll cover:

• CSS text-indent property
• how to indent text
• how to indent paragraphs
  • how to indent paragraphs except the first
• how to indent lists
• how to indent bullet points
• why text-indent property might not be working

Text-indent CSS

The CSS text-indent property sets the indentation of the first line in a text block. It can be defined by positive or negative values. If the value is positive, the first line will be indented to the right. If the value is negative, the first line will be intended to the left.

To set the text-indent property in CSS, you can use length values or percentages. Length values, like px, pt, and em, will define a fixed length of empty space. Percentages will define the indentation as a percentage of the width of the parent element.

Let’s take a look at how to use this CSS property to indent text, paragraphs, lists, and more.

How to Indent Text in CSS

You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements.

Say you want to indent all div elements containing text on a page to the right by 50px. Then, using the CSS type selector div, set the text-indent property to 50px. Here’s the result:

See the Pen by Christina Perricone (@hubspot) on CodePen.

How to Indent Paragraphs in CSS

You can use the CSS text-indent property to indent paragraphs using the same steps above.

Just use the CSS type selector p and set the text-indent property to the value you want. In the example below, let’s use a percentage. It will only indent the first line by default.

See the Pen How to Indent Paragraphs in CSS by Christina Perricone (@hubspot) on CodePen.

How to Skip Indent on First Paragraph

According to The Chicago Manual of Style, you can either indent the first line of text following a subheading or leave it flush left.

If you’d like to leave the first paragraph following a subheading flush left but indent every subsequent paragraph, then you can use the adjacent sibling combinator: p + p. Then set the text-indent property to the value you want. Here’s the result:

See the Pen by Christina Perricone (@hubspot) on CodePen.

How to Indent List in CSS

An ordered list element (<ol>) will indent its list items by default. If you’d like to change the indentation distance, then you can use CSS. In this case, you won’t use the text-indent property. Instead, you’ll use the margin-left or padding-left property.

Let’s say you want to push the list items further over to the right so they appear to be right aligned with the subheading. Then you can set the padding-left property to 20em. Here’s the result compared to a list with default indentation:

See the Pen by Christina Perricone (@hubspot) on CodePen.

How to Indent Bullet Points in CSS

Like an ordered list element, an unordered list element (<ul>) will indent its list items — or bullet points — by default. If you’d like to change the indentation distance, then you can use the margin-left or padding-left property.

Let’s say you want to push the bullet points further over to the left instead of the right. Then you can use the margin-left property and set it to a negative value. Here’s the result compared to bullet points with default indentation:

See the Pen by Christina Perricone (@hubspot) on CodePen.

Text-indent Not Working

You may run into some issues when trying to apply the text-indent property to HTML elements. The most common issue is if you try to apply this property to inline elements instead of block-level elements. If you try to indent a span element, for example, then the property will not work. But it will work if you apply the property to a paragraph element or another block element. Here’s an example:

See the Pen Text-indent Not Working by Christina Perricone (@hubspot) on CodePen.

Indenting in CSS

Indentation is a formatting technique that can help improve the readability of your web pages. Although it’s much more common to see in print, it’s still important to understand how to indent or change the indentation of paragraphs, lists, and bullet points online. The good news is that it only takes a little bit of HTML and CSS to master.