CSS text-indent

スタイルシート属性text-indentは、テキストのインデント（字下げ）を指定します。

ブロック要素、表のセルおよびインライン要素に対して指定可能。

書式

text-indent: length

text-indent: percentage

属性値

length

テキストのインデント（字下げ）幅を絶対値で指定する。以下に示す単位を利用できる。

単位

単位	意味	説明
em		フォントサイズ
rem	root em	ドキュメントのルート要素のフォントサイズ
cm	centimeters	1cm
mm	millimeters	1mm
Q	級 (quarter-millimeters)	0.25mm
in	inches	1 inch
pc	picas	1/6 inch
pt	points	1/72 inch
px	pixels	1/96 inch
%	percent	パーセント
vw	viewport width	ビューポートの幅の1/100
vmin	minimum viewport	ビューポートの幅または高さで小さい方の1/100
vmax	maximum viewport	ビューポートの幅または高さで大きい方の1/100

<p style="text-indent: 2rem">
  Dorothy lived in the midst of the great Kansas prairies, with Uncle
  Henry, who was a farmer, and Aunt Em, who was the farmer's wife.
</p>

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.

percentage

親要素の幅に対する相対値でテキストのインデント（字下げ）幅を指定する。

<p style="text-indent: 10%">10%</p>

10%

JavaScript

CSS の text-indent プロパティを JavaScript から 参照又は変更するには、エレメント・オブジェクトの style.textIndent プロパティを使う。

JavaScript から text-indent プロパティを変更する例を以下に示す。

<p>text-align:
  <select id="ta">
    <option>0</option>
    <option>1em</option>
    <option>1rem</option>
    <option>10mm</option>
    <option>10px</option>
    <option>10%</option>
    <option>10vw</option>
  </select>
</p>
<p id="ex">The quick brown fox jumps over the lazy dog.</p>
<script>
  document.getElementById("ta").addEventListener("change", function(evt){
    document.getElementById("ex").style.textAlign = evt.target.value;
  });
</script>

text-indent: 0 1em 1rem 10mm 10px 10% 10vw

The quick brown fox jumps over the lazy dog.

参考文献

World Wide Web Consortium (2023) CSS Text Module Level 3