---
title: text-indent
slug: Web/CSS/text-indent
tags:
  - CSS
  - CSS テキスト
  - CSS プロパティ
  - Reference
  - レイアウト
translation_of: Web/CSS/text-indent
---
<div>{{CSSRef}}</div>

<p>CSS の <strong><code>text-indent</code></strong> プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。</p>

<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p>包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css">/* &lt;length&gt; 値 */
text-indent: 3mm;
text-indent: 40px;

/* &lt;percentage&gt; 値
   包含ブロックの幅に対する割合 */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>{{cssxref("&lt;length&gt;")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("&lt;length&gt;")}} をご覧ください。</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>包含ブロックの幅の {{cssxref("&lt;percentage&gt;")}} 分だけ字下げされます。</dd>
 <dt><code>each-line</code> {{experimental_inline}}</dt>
 <dd><strong>強制的な改行</strong>の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし<strong>自動折り返し</strong>の次の行はインデントしません。</dd>
 <dt><code>hanging</code> {{experimental_inline}}</dt>
 <dd>インデントされる行が逆になります。つまり、先頭行<strong>以外の</strong>すべての行を字下げします。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Simple_indent" name="Simple_indent">単純なインデントの例</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">パーセント表記のインデントの例</h2>

<h3 id="HTML_2">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_2">CSS</h3>

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

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

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td><code>hanging</code> と <code>each-line</code> キーワードを追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>text-indent</code> がアニメーション可能に。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td><code>display: inline-block</code> と無名ブロックボックスの場合の動作が明確に定義されるようになりました。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

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