---
title: text-indent
slug: Web/CSS/text-indent
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Text
  - Layout
  - Referenz
translation_of: Web/CSS/text-indent
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die CSS Eigenschaft <code>text-indent</code><font face="Consolas"> </font>legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-indent")}}</pre>

<pre>text-indent: 3mm       /* Beispielwerte */
text-indent: 40px
text-indent: 15%       /* Prozentuale Angaben sind relativ zur Breite des Blockelements */
text-indent: each-line /* Festgelegte Werte */
text-indent: hanging

text-indent: inherit
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("&lt;length&gt;")}} .</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>Abstand wird prozentual {{cssxref("&lt;percentage&gt;")}} zur Breite des enthaltenden Blockelements angegeben.</dd>
 <dt><code>each-line</code> {{experimental_inline}}</dt>
 <dd>Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (<em>forced line break</em> ), lässt Zeilen nach einem <em>soft wrap break</em> allerdings unberührt.</dd>
 <dt><code>hanging</code> {{experimental_inline}}</dt>
 <dd>Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.</dd>
</dl>

<h2 id="Simple_indent" name="Simple_indent">Beispiel mit absoluter Angabe</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p {
  text-indent: 5em;
  background: powderblue;
}</pre>

<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p>

<h2 id="Percentage_indent_example" name="Percentage_indent_example">Beispiel mit prozentualer Angabe</h2>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css">p {
  text-indent: 30%;
  background: plum;
}</pre>

<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p>

<h2 id="Details">Details</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Schlüsselwerte <code>hanging</code> und <code>each-line</code> hinzugefügt</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>text-indent</code> als Eigenschaft, die animiert werden kann</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Verhalten von <code>display: inline-block</code> und anderen <code>block </code>Containern explizit definiert</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{Compat("css.properties.text-indent")}}</p>