Computer Tips / Web Design / indent css
Home | Computer Tips | Home DIY Tips | Safety Tips | Fun Facts                                                                                                 stolons: Worklooker | Monkeydoit


Make a Text Paragraph Indent Using CSS

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

No indent text paragraph

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 - Indented text paragraph

CSS - Outdented text paragraph (called 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

CSS - Outdented text paragraph (called a a hanging indent)

If you want to indent or outdent all paragraphs in your document you could add the following to your external .css file, see example #4:

Example 4

p { text-indent:2em; }



comments powered by Disqus