CSS3

プロパティ

text-indent

→●、mdn

字下げ。

このプロパティは、ブロック内の行内内容の各行に適用される字下げを指定する。字下げは、行ボックスの始端辺に適用されるマージンとして扱われる。

影響されるのは、キーワード［each-line ／ hanging］により、他が指定されない限り、要素の整形される最初の行 [CSS-PSEUDO-4] に限られる。例えば、匿名なブロック･ボックスの最初の行は、その親要素の最初の子であるときに限り影響される。

<length-percentage> ○

＝<length> | <percentage>

<length> ○

字下げ量を、絶対長さとして与える。

<DIV style="border:1px solid red; width:200px; font-size:15px;
 text-indent:20px;
">あああああああああああああああああああああああああああああああ
</DIV>

<DIV style="border:1px solid red; width:200px; font-size:15px;
 text-indent:-20px;
">あああああああああああああああああああああああああああああああ
</DIV>

<DIV style="border:1px solid red; width:200px; font-size:15px;
 text-indent:-20px;
 padding-left:20px;
">あああああああああああああああああああああああああああああああ
</DIV>

<percentage> ○

字下げ量を、ブロックコンテナの自前の論理横幅に対する百分率として与える。【“自前の”：すなわち、包含ブロックのそれではなく（課題 #2394）。】

百分率は、内在的サイズ供与を計算する目的においては 0 として扱うものとする ― レイアウトを遂行するときは、常に通常どおり解決される。

注記： これは要素を過フローさせ得るので、内在的サイズ法と併用することが推奨される。

<DIV style="border:1px solid red; width:200px; font-size:15px;
 text-indent:10%;
">あああああああああああああああああああああああああああああああ
</DIV>

<DIV style="border:1px solid red; width:100px; font-size:15px;
 text-indent:10%;
">あああああああああああああああああああああああああああああああ
</DIV>

hanging

影響される行の集合を反転する。

<DIV style="border:1px solid red; width:200px; font-size:15px;
 text-indent:40px hanging;
">あああああああああああああああああああああああああああああああ
</DIV>

¶

each-line

字下げは、各［ブロック･コンテナの最初の行、および 強制行分断の直後にある行］に影響する（自動折り返し分断の直後にある行には影響しない）。

<DIV style="border:1px solid red; width:200px; font-size:15px;
 text-indent:40px each-line;
">あああああああああああああああああああああああああああああああ
</DIV>

¶

左から右 テキストの下で、text-align は start に、text-indent は 5em にされている場合（浮動体は無いとする）：

テキストの最初の行は、ブロックの始端から 5em の所から開始する。

text-indent の値が hanging 5em の場合：

最初の行が始端に接合される一方、他の行は 5em だけ字下げされることになる。

¶図不明にて除く

text-indent の値は 3em hanging each-line にされている：

その結果、詩の 4 行目、ブロックの右端境界の自動折り返しの所で、字下げがぶら下がる。

テスト