Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

HTML

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

CSS

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

画面表示

スクリーンショット 2018-02-12 9.41.46.png

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away