text-indent

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

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

構文

/* <length> 値 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> 値
   包含ブロックの幅に対する割合 */
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;

値

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

形式文法

<length-percentage> && hanging? && each-line?ここで
<length-percentage> = <length> | <percentage>

単純なインデントの例

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p {
  text-indent: 5em;
  background: powderblue;
}

パーセント表記のインデントの例

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p {
  text-indent: 30%;
  background: plum;
}

仕様書

仕様書	状態	備考
CSS Text Module Level 3 text-indent の定義	勧告候補	`hanging` と `each-line` キーワードを追加。
CSS Transitions text-indent の定義	草案	`text-indent` がアニメーション可能に。
CSS Level 2 (Revision 1) text-indent の定義	勧告	`display: inline-block` と無名ブロックボックスの場合の動作が明確に定義されるようになりました。
CSS Level 1 text-indent の定義	勧告	Initial definition.

初期値	`0`
適用対象	ブロックコンテナー
継承	あり
パーセント値	包含ブロックの幅に対する相対値
計算値	指定されたパーセント値または絶対的な長さ、続けて指定された任意の数のキーワード
アニメーションの種類	length またはパーセント値, calc();

ブラウザーの対応

BCD tables only load in the browser