• Post category:CSS

How to Indent a Paragraph in CSS

CSS Indent Paragraph

In this article, we will learn how to space a paragraph in CSS. If you want to add some indentation (space) to the beginning of the paragraph, we should use the CSS “text-indent” property.

If you add space like this:

<p>    Cascading Style Sheet</p>

A space will not be added at the beginning of the paragraph because the browser will remove all extra spaces.

How to use Text indent property

<!DOCTYPE html>
<html>
<head>
<title>Text indentation</title>
</head>
<body>
<p style="text-indent: 20px;">Cascading Style Sheet</p>
</body>
</html>

Output:

css indent paragraph

Step:

  1. In the above code, we have written the basic structure of HTML.
  2. Then we create a <p> tag with some text in the body section.
  3. We want to add some indent (space) to the beginning of the paragraph, So we use the “text-indent” property and give the value as “20px“.
  4. We can give value as px, em, pt, etc.
  5. See the above output the text is displayed with some space at the beginning of the paragraph.

Leave a Reply