The text-indent Property

Made minor corrections: Nov 04, 2009

The text-indent property is used to indent the first line of a block-level element. Adding or removing space from the beginning of a line is called indentation.

The text-indent property can be applied to block-level elements only. It can accept length values, percentage values and the keyword inherit. Percentage values refer to the width of the parent block-level element. Em values refer the font size of the element to which the text-indent property is applied. Negative values are allowed, these result in space being removed from the beginning of a line. The text-indent property is inherited by child block-level elements.

Note 1: When the text-indent declaration has a percentage value, the declared percentage value is inherited by child block elements. However, in Internet Explorer 6 and 7 and in Opera 10, the computed value is inherited.

Note 2: When the text-indent declaration has an em value, in Firefox 3, Firefox 3.5, Opera 10, Safari 4 and Chrome 3 the computed value is inherited by child block elements. However, Internet Explorer 6, 7, and 8, the declared em value is inherited by child block elements.

text-indent with px values

Example 1: <p style="font-size:35px;font-family:'Times New Roman';text-indent: 20px">The @&Acirc; The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly</p>

In the above example, the first line is indented by 20px. Subsequent lines are not indented.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-indent:-20px">the quick brown @&Acirc; fox jumps over the lazy dog. The five boxing wizards jump quickly</p>

In the above example, the first line of the <p> has a negative indent. This is called a hanging indent. A negative value to text-indent causes the beginning of the line to hang out of the line box. Note that since the text is outside the line box, it does not have the background image of the <p> behind it. Also, unless the <p> has margin + padding to the left of it that is at least equal to the amount of negative indentation, some part of the text will fall out of the viewport and will not be visible.

text-indent with percentage values

When the text-indent property has a percentage value, the amount of indentation is calculated by multiplying the percentage with the width of the parent block element. Every block-level element that can be displayed has the body element as the ancestor. Therefore, if no other parent element exists, then the percentage is calculated with respect to the width of the body element. The width of the body element can be its CSS declared width or, if it has no width declared, the width of the browser window. When the amount of indentation is dependent on the width of the browser window, the indentation changes each time the user changes the width of the browser window.

Example 3: <div style="width:450px"><p style="font-size:35px;font-family:'Times New Roman';text-indent: 4.5%">The @&Acirc; The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly</p></div>

In the above example, the width of the parent block-level element is 450px. Therefore the amount of indentation is 20px (4.5% of 450px = 20.25px, rounded to 20px). Therefore, the line should look exactly like the one in Example 1. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the line is indented 20px and looks exactly like the line in Example 1. However, in Internet Explorer 6 and in Internet Explorer 7, the line is indented 34px. Therefore, Internet Explorer 6's and Internet Explorer 7's implementation of text-indent with percentage values is buggy.

text-indent with em values

When the text-indent property has an em value, the amount of indentation is calculated by multiplying the em value with the font size of the element that the text-indent property has been applied to.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';text-indent:0.57em">The @&Acirc; The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly</p>

In the above example, the font size of the <p> is 35px and the text-indent declaration has a value of 0.57em. This is computed to 20px (0.57 * 35 = 19.95px, rounded to 20px). Therefore, the above line will look exactly the same as the line in Example 1.

text-indent:inherit

text-indent:inherit is used to override another text-indent declaration that has been applied to an element. If an ancestor element has a percentage text-indent declaration, then in Firefox 3, Firefox 3.5 and Internet Explorer 8 the descendant element inherits the percentage value. If an ancestor element has an emtext-indent declaration, then in Firefox 3 and Firefox 3.5, the computed value is inherited by the descendant element. However, in Internet Explorer 8, the em value in inherited. If an ancestor element has a pxtext-indent declaration, then the px value is inherited by the descendant element in Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8.

Note: Internet Explorer 6 sometimes ignores the text-indent:inherit declaration

Conclusion

Percentage values with text-indent must be avoided because Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly, also in these browsers descendant elements inherit computed values whereas Firefox 3, Firefox 3.5 and Internet Explorer 8 inherit the percentage values. This may result in inconsistent rendering across different browsers.

em values with text-indent must be avoided because in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, descendant elements inherit the declared em value whereas Firefox 3 and Firefox 3.5 inherit the computed values. This may result in inconsistent rendering across different browsers.

Therefore, for consistent results across browsers, text-indent with px values should be used.