text-indent CSS2.2

text-indent は、ブロックコンテナ内のテキストの最初の行のインデント（字下げ）を指定する時に使います。 より正確には、ブロックの最初の行ボックスに流入する最初のボックスのインデントを指定します。 行ボックスの左端のエッジに対してインデントされます。（右→左のレイアウト場合は右端エッジ） 負の値も指定できます。

名前:text-indent
値: <length> | <percentage> | inherit
初期値:0
適用対象:ブロックコンテナ
継承:する
パーセンテージ:包含ブロックの幅を参照
メディア:visual（視覚的）
計算値:指定のパーセンテージまたは絶対的長さ

Value（値）

<length>
数値＋単位で指定 初期値は 0
<percentage>
親要素の幅に対する割合を指定（数値+％）
inherit
親要素の値を継承する

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-indent: 1em; }
   p.test2 { text-indent: 5%; }
  </style>
 </head>
 <body>
   <p class="test1">（文章）</p>
   <p class="test2">（文章）</p>
 </body>
</html>

display (text-indent:1em;)

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (text-indent:3%;)

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

※ ブロック要素に text-indent を指定した場合、そのままだと子孫インラインブロック要素にも継承します。 このため、継承させたくない場合は、display:inline-block と指定された要素には text-indent:0 を指定しておくと良いでしょう。

text-indent CSS3

名前:text-indent
値: [ <length-percentage> ] && hanging? && each-line?
初期値:0
適用対象:ブロックコンテナ
継承:する
パーセンテージ:包含ブロックの範囲内
メディア:visual（視覚的）
計算値:指定のパーセンテージまたは絶対的長さ、指定のキーワード
正規順序:per grammar（文法通り）
アニメーション:長さ、パーセンテージ、またはcalc式。（キーワードが一致する場合のみ）

Value（値）

<length>
数値＋単位で指定 初期値は 0
<percentage>
親要素の幅に対する割合を指定（数値+％）
hanging
影響を受ける行を反転 CSS3
each-line
各ブロックコンテナの最初の行と強制改行後の各行に影響する（正し、折り返し後の行ではない）CSS3

例

CSS1以降、ブロック要素の最初の行をインデントするのは可能です。text-indent プロパティを 5em にすることによって 5em インデントされます。

左→右に表示されるテキストで text-align:start 、text-indent:5em が指定されている場合、 テキストの最初の行は、ブロックの start（始まる部分） から 5em の位置が開始となる。（float は無しとして）

CSS3では、text-indent プロパティに hanging 5em を指定することによって ブロック要素の他の全ての行を 5em インデントできます。

hanging キーワードを追加すると、最初の行は start に処理されますが、他の行は 5em インデントされます。 ※ hanging は、まだサポートされていないようです。

この段落の中ほどには、ブロックの中央に配置されている方程式がある。
x+y=z
方程式後の最初の行は、処理されている。（そうでなければ、新しい段落を開始したように見える）

text-indent は段落の最初の行のみに影響するので、強制的に改行された後の行はインデントしません。 ※ この例では text-indent:1em; を指定。方程式は div で中央配置にしているので、方程式もインデントされています。

短いテキスト行では
改行は必要ありませんが、
何度も何度も何度も何度もテキストが繰り返す時、
自動改行が役立つ
こともあります。

詩やコードのように折り返すのに十分な長さになっている行をインデントすることが必要な時もあります。 上の例では text-indent に 3em hanging each-line を指定していますので、 長い3行目はブロックの右端で自動改行する hanging インデントが与えられることになります。 ※ hanging、each-line はまだサポートされていないようです。

※ Google Chrome 64.0.3282.186、Firefox58.0.2にて表示確認（2018/3/18）

上に戻る