How to Indent a Paragraph with CSS


CSS


In this article, we will go over how to indent a paragraph with CSS.

By default, a p tag in CSS does not receive any indentation. By default, it is left-aligned so that it starts at the leftmost aspect of the page.

To create an indentation of the paragraph, a special CSS property must be used called the text-indent property. This text-indent property receives one value as its parameter, which tells it (in px) how much the paragraph should be indented in.

So, for example, an indented paragraph, indented 40px, will have the following CSS code:

This is how the indented paragraph looks:

Here is a paragraph in CSS with an indentation of 40px. Indentation is a formatting used on paragraphs to pad in the first sentence of the paragraph. This is commonly used in paragraphs either to format paragraphs so that many different paragraphs appearing on a page are easily differentiated, meaning you can tell when a new a paragragh starts by the indentation, or for just style. Use this CSS property when you want paragraphs to be styled with indentation.

This is how the above paragraph would look without any indentation applied to it:

Here is a paragraph in CSS with an indentation of 0px. Indentation is a formatting used on paragraphs to pad in the first sentence of the paragraph. This is commonly used in paragraphs either to format paragraphs so that many different paragraphs appearing on a page are easily differentiated, meaning you can tell when a new a paragragh starts by the indentation, or for just style. Use this CSS property when you want paragraphs to be styled with indentation.

Thus, you can now see the noticeable difference.

If you want to increase the indentation, you just give the text-indent property a greater number in pixels (px). Similarly, if you want to decrease the indentation, you decrease the number of the pixels.


Below is a paragraph with an indentation of 80px:

Here is a paragraph in CSS with an indentation of 80px. Indentation is a formatting used on paragraphs to pad in the first sentence of the paragraph. This is commonly used in paragraphs either to format paragraphs so that many different paragraphs appearing on a page are easily differentiated, meaning you can tell when a new a paragragh starts by the indentation, or for just style. Use this CSS property when you want paragraphs to be styled with indentation.


Below is a paragraph with an indentation of 20px:

Here is a paragraph in CSS with an indentation of 80px. Indentation is a formatting used on paragraphs to pad in the first sentence of the paragraph. This is commonly used in paragraphs either to format paragraphs so that many different paragraphs appearing on a page are easily differentiated, meaning you can tell when a new a paragragh starts by the indentation, or for just style. Use this CSS property when you want paragraphs to be styled with indentation.



HTML Comment Box is loading comments...