text-indent

段落の先頭行に字下げをつくるプロパティ。2行目以降を固定したまま先頭行だけを動かし、文章の始まりを整えます。

CSSの`text-indent`とは？

段落の先頭行をライブプレビューで左右へ動かしながら、初期値、長さ・割合・負の値、継承を初学者向けに解説します。

遊んでみよう

点線は本文の開始位置。先頭行だけを変更

段落の先頭行だけを左右へ動かします。2行目以降の開始位置と比べると、字下げの距離が見えてきます。

32px

CSS

.element text-indent: 32px;

値のパターン

先頭行の字下げ text-indent32px

text-indentの構成要素

01<length>

長さで字下げする

pxやemなどで距離を指定します。正の値は内側へ、負の値は開始側の外へ先頭行を動かします。

02<percentage>

幅に合わせて字下げする

割合は包含ブロックの幅を基準に計算されます。箱の幅が変わると字下げの距離も変わります。

03inherit

親の字下げを受け継ぐ

text-indentは継承されるため、親へ指定すると中のブロックコンテナーにも同じ値が受け継がれます。

04hanging / each-line

字下げする行を切り替える

仕様には先頭行以外や強制改行後も対象にするキーワードがありますが、ブラウザー対応を確認して使います。

早見表

初期値は0です。基本は長さで先頭行を内側へ動かし、幅に連動させるときは割合、外へ突き出すときは負の値を使います。

010字下げしない初期値

022em現在の文字サイズ2文字分を空ける相対長

0332px一定の距離を空ける固定長

0410%包含ブロック幅の10%を空ける割合

05-1em先頭行を開始側へ突き出す負の値

062em hanging先頭行以外を字下げする対応状況に注意

072em each-line強制改行後の行も字下げする対応状況に注意

よくある使い方

本文の段落を1文字分下げる

emを使うと文字サイズに合わせて距離が変わり、日本語の段落の始まりをそろえられます。

.article p { text-indent: 1em; }

注釈の記号を外へ突き出す

負の値と開始側のpaddingを組み合わせ、記号だけを本文の並びより外側へ置けます。

.note { padding-inline-start: 1.5em; text-indent: -1.5em; }

箱の幅に合わせて字下げする

割合を使うと、カードや説明欄の幅が変わったときに字下げの距離も連動します。

.lead { text-indent: 8%; }

ポイント

動くのは、段落の先頭行だけ。

text-indentの初期値は0で、ブロックコンテナーに適用され、子要素へ継承されます。割合は包含ブロックの幅を基準にし、正の値はインライン開始側から内側へ、負の値は外側へ先頭行を動かします。字下げは要素のpaddingとは別に加わるため、大きな値や負の値で文字が切れないか確認します。値は長さ・割合としてアニメーションできます。仕様にあるhangingとeach-lineはブラウザーによって対応が異なるため、利用前に対象環境で確かめます。