text-indent

  • Revision slug: CSS/text-indent
  • Revision title: text-indent
  • Revision id: 37549
  • Created:
  • Creator: AndreeaStanciu
  • Is current revision? No
  • Comment one or more formatting changes

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> && [ hanging || each-line ]

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.
hanging (CSS3)
Indentation of the first line of the block container and each line following a forced line break, but not lines that wrap normally
each-line (CSS3)
Inverts which lines are indented

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 New Features
Internet Explorer 3.0  
Firefox (Gecko) 1.0 (1.0)  
Opera 3.5  
Safari (WebKit) 1.0 (85)  

Specifications

See also

{{ CSS_Reference:Text() }}

{{ languages( { "fr": "fr/CSS/text-indent"} ) }}

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; &amp;&amp; [ hanging || each-line ]
</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> <dt>hanging (CSS3)</dt> <dd>Indentation of the first line of the block container and each line following a forced line break, but not lines that wrap normally</dd> <dt>each-line (CSS3)</dt> <dd>Inverts which lines are indented</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> <th>New Features</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td> </td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td> </td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td> </td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td> </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> <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-indent">CSS 3 Text #text-indent</a></li>
</ul>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
<p>{{ languages( { "fr": "fr/CSS/text-indent"} ) }}</p>
Revert to this revision