How to indent paragraph text in HTML/CSS

Need to indent text in an HTML element? You can indent the first line of a paragraph using CSS!

Here’s how you can do that:

Indent the first line of a paragraph with text-indent

Let’s say you have some text in a paragraph like this:

<p class="indent">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat!
</p>

You can use the CSS property text-indent to indent the first line a specific length:

p.indent {
    text-indent: 30px;
}

And here’s what that will look like:

Like other CSS length properties, you can use any unit you want for this. Pixels (px), em, rem, even percentage (%) units will work.

Using a relative unit like percentage will change the amount of indentation based on the width of the webpage. The wider the webpage, the larger the indent will be.

You can even add a negative text-indent value if you want, to make the first line stick out to the left.

p.indent {
    text-indent: -30px;
}

Here’s what the negative indent will look like in a paragraph:

Use margin-left if you want the entire paragraph to be shifted to the right

If you want the entire paragraph to be shifted over, not just the first line, then you can use the margin-left property.

p.shifted {
    margin-left: 30px;
}

Here’s what that will look like. The first paragraph is not shifted over, and the second paragraph is: