More than 5 years have passed since last update.

【CSS】2行目から1文字下げる。text-indentの使い方

Last updated at 2018-04-18Posted at 2018-02-12

箇条書きや注意書きの文章をマークアップする時に、文章の先頭に「・」や「※」、アイコン等の記号を配置することがよくあります。
そんな時に、2行目以降が記号の下に回り込ませずに綺麗に文字を揃えるTipsです。

HTML

<p class="indent">text-indetプロパティを使って文字を揃えます。<br>text-indetプロパティを使って文字を揃えます。</p>
<p>text-indetプロパティを使って文字を揃えません。<br>text-indetプロパティを使って文字を揃えません。</p>

.indent {
  padding-left: 1em;
  text-indent: -1em;
}

padding-leftで左側に1文字分の余白を作成(1emは1文字の大きさ)します。
text-indentで-1emすることで1行目の余白のスペース移動、つまり左側に1文字分移動させます。

文章の先頭にアイコンを使用した時にも便利です！