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?

where
<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 の定義
草案 hangingeach-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 または percentage, calc();

ブラウザーの対応

BCD tables only load in the browser