カテゴリー
CSS text-indent

【CSS】text-indent:テキストのインデント幅を調整する

(例)【CSS】text-indentの使用方法

See the Pen
indent
by linlin (@linlin098765)
on CodePen.

<h5>text-indent:100px; を指定</h5>
<p class="sample" style="text-indent:100px;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:100px;">
There are three apples on the desk.
</p>

<h5>text-indent:2em; を指定</h5>
<p class="sample" style="text-indent:2em;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em;">
There are three apples on the desk.
</p>

<h5>text-indent:2em each-line; を指定</h5>
<p class="sample" style="text-indent:2em each-line;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em each-line;">
There are three apples on the desk.
</p>

<h5>text-indent:2em hanging; を指定</h5>
<p class="sample" style="text-indent:2em hanging;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em hanging;">
There are three apples on the desk.
</p>
p.sample {
	width:200px;
	background-color:gray;
}

【CSS】text-indent:テキストのインデント幅を調整する

 CSSのtext-indentは、テキストの1行目のインデント幅を調整するプロパティです。インデント幅には、負の値も指定可能です。

  • px,ex,em等
    単位でインデント幅を指定
  • %
    ブロックに対する%で指定
  • each-line
    1行目だけでなく、改行後もインデントをする
  • hanging
    1行目以外をインデントする