CSS - How to indent text in HTML documents

The CSS text-indent property is a style property that allows you to put empty stapce before the first line of a paragraph to make it easier to read.

The text-indent property accepts number value in CSS units (px, em, rem)

The syntax is as follows:

text-indent: 15px; || 1.5em; || 1.5rem

Now let’s try to apply some indent to an HTML <p> and <div> tags. I’m going to make the indent 50px to make it easier to spot:

<style>
  .indent {
    text-indent: 50px;
  }
</style>
<div class="indent">
  Hello World! This is a div using the indent class. The first line is 
  indented by a certain amount of pixels, but not the rest of the div
  lines.
</div>
<p class="indent">
  Now this is a paragraph with the indent class. As you can see, the first 
  line is indented just like in the div class. The <code>text-indent</code> 
  property works with most HTML elements
</p>

The result will be as follows. The indentation is marked with the red bars:

The text-indent property follows the direction property value, so if you have a right-to-left text, just add the direction property to your HTML elements:

<style>
  .rtl {
    direction: rtl;
  }
  .indent {
    text-indent: 50px;
  }
</style>
<div class="rtl indent">
  <!-- content here -->
</div>

Next, let’s look at how you can indent the whole paragraph and not just the first line.

CSS indent the whole paragraph

Keep in mind that the indentation using text-indent property will only affect the first line even when you use the <br> tag to force a hard break between the lines:

The following HTML document:

<div class="indent">
  Hello World! This is a paragraph using the indent class.
  <br />The first line is indented by a certain amount of pixels.
  <br />But not the rest of the paragraph lines.
</div>

Will produce the following output:

To solve this issue, there’s an experimental CSS specification for text-indent property called each-line that’s supposedly indent each line of the paragraph separated using <br> tag.

But since this value is experimental, it’s not supported by the browsers yet.

When you need to indent the whole paragraph and not just the first one, then you need to use the padding-left property (or padding-right when you have right-to-left text direction)

For example, let’s create a new CSS class selector called indent-all that has the padding-left:50px style applied:

<style>
  .indent-all {
    padding-left: 50px;
  }
</style>
<p class="indent-all">
  Hello World! This is a paragraph using the indent class. The first line is
  indented by a certain amount of pixels, but not the rest of the paragraph
  lines.
</p>
<p class="indent-all">
  Hello World! This is a paragraph using the indent class.
  <br />The first line is indented by a certain amount of pixels.
  <br />But not the rest of the paragraph lines.
</p>

Since padding-left creates empty space on the left side of your content, your content will be indented no matter when you use hard break or soft break.

The HTML above will produce the following output:

Now if you have a right-to-left text direction, then you need to use padding-right instead of padding-left.

The following CSS rule should be used for right-to-left direction:

.rtl {
  direction: rtl;
}
.indent-all-right {
  padding-right: 50px;
}

Now you just need to add both classes above to the HTML tag with right-to-left direction that you want to indent.