How to indent paragraph using CSS?

Answer

To indent paragraph using CSS, you can set the text-indent style property for the paragraph elements with the values like 40px, 10%, 1in, 3rem, etc.

CSS Code

The following is the typical CSS code to indent paragraph in HTML page using tag name p.

Using width in pixels

p {
   text-indent: 40px;
}

Using 10 percent of width of parent

p {
   text-indent: 10%;
}

Using width of 1 inch

p {
   text-indent: 1in;
}

Using indent relative to parent dimensions

p {
   text-indent: 3rem;
}

Examples

We shall go through some working examples on how to indent paragraph using CSS. In the following examples, you may change the value of text-indent and Run the code to visually observe the changes made to the Paragraph elements.