テキスト

text-indent

text-indent は、段落の 1 行目の字下げを指定します。負の値にすると、1 行目が左にはみ出します。

構文

<length-percentage> && hanging? && each-line?

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  text-indent: 2em;
}

text-indent2em

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

長さ・パーセント：1em なら 1 文字分下げます。パーセントは要素の幅に対する割合です。負の値にすると、1 行目が左にはみ出します。初期値は 0 です。
hanging：下げる行を反対にして、1 行目以外を下げます。
each-line：br で改行したあとの行も字下げします。自動で折り返した行は下げません。

hanging と each-line は後から足された書き方で、Chrome などは対応していません。対応していないブラウザでは宣言ごと無視されるので、このページのコントロールには入れていません。

日本語の段落の頭を 1 字下げる：text-indent: 1em
「※」の注記のように 2 行目以降を揃える：padding-left: 1em と text-indent: -1em を組み合わせます。1 行目だけが余白にはみ出します。

字下げはブロック要素（や inline-block）の 1 行目にかかります。span のようなインライン要素に指定しても効きません。