text-indent - テキストにインデントを付ける

投稿日: / 更新日:

スタイルシートのtext-indentは、インデント(文字下げ)の幅を指定するためのプロパティです。

サンプルコード

text-indentを指定したサンプルコードです。1emで、テキスト1文字分の幅と同等になります。

div {
	text-indent: 1em ;
}

デモ

text-indentに1emを指定して、1文字分の幅だけ、文字下げをしたデモです。CSSを編集して、どのように変化するのかをお試し下さい。

値の指定

値の指定方法は主に下記の通りです。リンクをクリックするとデモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のtext-indentには、bodyに指定された値(1em)が引き継がれる。ただし、inheritを指定してもしなくても、text-indentの値は子要素に引き継がれる。
initialプロパティの初期値が適用される。この場合、0px(インデントなし)が適用される。
lengthpxやemなど、CSSで許可されている単位を利用してサイズを指定します。(単位の一覧)

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

  • Chrome

    ●

    -

    時期不明

  • Firefox

    ●

    -

    時期不明

  • Safari

    ●

    -

    時期不明

  • Ie

    ●

    -

    時期不明

  • Edge

    ●

    -

    時期不明

  • Opera

    ●

    -

    時期不明

  • Safari(iOS)

    ●

    -

    時期不明

  • Ie Mobile

    ●

    -

    時期不明

  • Chrome

    ●

    -

    時期不明

  • Android

    ●

    -

    時期不明

  • FF Mobile

    ●

    -

    時期不明

  • Opera Mobile

    ●

    -

    時期不明