ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

1行目の字下げは、text-indentで行えますが、2行目以降を字下げする場合はどうするか?

参考 : html/cssで1行目を字下げをする

こんな感じにレイアウトしたい

☆一般のお客様の入場は12:00からです。会員様は11:00より入場できます。

注意書きなどで文頭に「☆」や「※」などを付けたとき、こうゆうレイアウトがほしくなります。
尚、何も考えずにレイアウトすると、

☆一般のお客様の入場は12:00からです。会員様は11:00より入場できます。

のようになってしまいます。
「☆」という「注意」を引かせる文字が隠れて見づらいですよね。
2行目以降を字下げして、1行目の「☆」マークを見やすくする、そんなレイアウトの表記方法です。

text-indentとpadding-leftの解法

解決方法を単純に言うと、こんな感じです。

全行1文字字下げした後、1行目だけ「字下げ」をキャンセルする

1行目だけ字下げはなかったことにするので、2行目以降の文頭よりも1文字前に出てくるわけですね。

手順

1)padding-leftで全体を1文字字下げする。


2)1行目だけtext-indentで字下げをキャンセルする

「1行目だけ字下げをキャンセルする」というのが直接できないので、text-indent変えて、1行目だけ書き出し位置をかえてやろうという処置をしてます。
この場合、「☆」から始まる1行目が左に1文字ずれたら綺麗ですよね。
通常、text-indent:1emとすると、文字が右にずれることを利用し、それと逆方向の-1emを指定します。

<p>
☆一般のお客様の入場は12:00からです。会員様は11:00より入場できます。
</p>
p {
 padding-left:1em;
 text-indent:-1em;
}

padding-leftで全行「字下げ」を実施したのち、text-indentで1行目だけ -1文字 字下げを(文章を左に1文字ずら)してると。
「-1文字字下げ」ですので、1文字前に出てくるわけです(左にずれるわけです)。

ちょっとだけ見栄えよくなりますよね。

参考

参考記事