text-indent

text-indentは、１文字目の字下げ幅を指定するスタイルです。

解説

文章の１文字目を字下げする時に字下げするサイズを指定したい時に使用します。

値は、数値か割合で指定します。数値を指定する場合はマイナス値も指定可能です。

構文

構文は以下になります。

値

text-indentには以下の値が指定できます。

text-indentの初期値は0です。

サンプル

インデントサイズを１文字分（1em）に設定する

.sample01 {
  text-indent:1em;
}

<div class="sample01">あいうえお
かきくけこ
さしすせそ</div>

インデントサイズを要素に対して50%に設定する

.sample02 {
  text-indent:50%;
}

<div class="sample02">あいうえお
かきくけこ
さしすせそ</div>

この場合、divの横幅に対して50%のサイズになります。

インデントサイズを-10pxに設定する

.sample03 {
  text-indent:-10px;
}

<div class="sample03">あいうえお
かきくけこ
さしすせそ</div>

マイナス値を指定すると、１文字目が指定したサイズ分前に表示されます。

備考

• １文字分字下げしたい場合は、1emを指定すればOKです。
  （1emは１文字分という意味なので、以降2em、3emといった指定が可能です。）

Tweet