text-indent

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

仕様書

ブラウザ実装状況

[1] Gecko はまだこの機能を実装してません。バグ 784648 をご覧ください。