text-indent

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

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

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

構文

/* <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;
}

仕様書

ブラウザーの対応