text-indent

  • Revision slug: CSS/text-indent
  • Revision title: text-indent
  • Revision id: 37546
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment spec link corrected and section moved down; 8 words added, 8 words removed

Revision Content

{{ CSSRef() }}

Summary

The text-indent CSS property specifies how much horizontal space should be left before beginning of the first line of the text content of an element. Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: block and inline-block elements, table cells
  • {{ Xref_cssinherited() }}: yes
  • Percentages: refer to width of containing block
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the percentage as specified or the absolute length

Syntax

text-indent:  <length> | <percentage>

Values

<length>
Indentation is specified as fixed {{ Xref_csslength() }}. Negative Values are allowed. See {{ Xref_csslength() }} values for possible units.
<percentage>
Indentation is a {{ Xref_csspercentage() }} of the containing block width.

Examples

p { text-indent: 2em } 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Browser compatibility

Browser Lowest version
Internet Explorer 3.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Specifications

See also

{{ CSS_Reference:Text() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> text-indent </code>CSS property specifies how much horizontal space should be left before beginning of the first line of the text content of an element. Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> 0</code></li> <li>Applies to: block and inline-block elements, table cells</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: refer to width of containing block</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the percentage as specified or the absolute length</li>
</ul>
<h3>Syntax</h3>
<pre>text-indent:  &lt;length&gt; | &lt;percentage&gt;
</pre>
<h3>Values</h3>
<dl> <dt>&lt;length&gt;</dt> <dd>Indentation is specified as fixed {{ Xref_csslength() }}. Negative Values are allowed. See {{ Xref_csslength() }} values for possible units.</dd> <dt>&lt;percentage&gt;</dt> <dd>Indentation is a {{ Xref_csspercentage() }} of the containing block width.</dd>
</dl>
<h3>Examples</h3>
<pre>p { text-indent: 2em } 
</pre>
<p style="text-indent:2em; max-width:40em; background:gold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" title="http://www.w3.org/TR/CSS21/text.html#indentation-prop">CSS 2.1 Text #text-indent</a></li>
</ul>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision