Home > Computers > Web Design
How do I make a text paragraph indent using CSS?
Normal - No indent text paragraph
In the example below I didn't assign any inline style to the <P> tag.
Example 1
CSS - Indented text paragraph
In example 2 below, I assigned <p style="text-indent:2em;">. This creates an indented paragraph in relation to the containing element such as a div container it might be inside. You could also use px instead of em to specify the unit of measure. Note that I used a positive 2 value for the text indent.
Example 2
CSS - Outdented text paragraph (called a a hanging indent)
In example 3, I assigned <p style="text-indent:-2em;"> . The negative number -2 creates an outdented paragraph in relation to the containing element. Just be careful that your text doesn't flow outside the containing div so that it interferes, crowds or clips other content. You can fix the problem by increasing the margins spacing to offset this.
Example 3
If you want to indent or outdent all paragraphs in your document you could add the following to your external .css file:
Example 4
p {text-indent:2em;}
Make a Text Paragraph Indent Using CSS
|
Normal - No indent text paragraph
In the example below I didn't assign any inline style to the <P> tag.
Example 1
CSS - Indented text paragraph
In example 2 below, I assigned <p style="text-indent:2em;">. This creates an indented paragraph in relation to the containing element such as a div container it might be inside. You could also use px instead of em to specify the unit of measure. Note that I used a positive 2 value for the text indent.
Example 2
CSS - Outdented text paragraph (called a a hanging indent)
In example 3, I assigned <p style="text-indent:-2em;"> . The negative number -2 creates an outdented paragraph in relation to the containing element. Just be careful that your text doesn't flow outside the containing div so that it interferes, crowds or clips other content. You can fix the problem by increasing the margins spacing to offset this.
Example 3
If you want to indent or outdent all paragraphs in your document you could add the following to your external .css file:
Example 4
p {text-indent:2em;}