2行目以降字下げは、text-indent -1em; を使う

こんにちは、tanaka です。

1字下げは
text-indent 1em
だけど

2行目以降を
字下げしたいときは
どうすればいいのだろう?

それで困ったことはありませんか?

padding-left: 1em;
text-indent: -1em;

を使えばできます。

padding     = 左に1文字分の空きを作る
text-indent: -1em = −1字字下げする
(マイナスなので1行目が左に飛び出る)

それでは詳しく説明していきます。

padding-left: 1em;
text-indent: -1em;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

説明

普通の1字下げ

1行目字下げ

字下げ画像12

padding-left: 1em;

padding-left: 1em;

2行目以降字下げ

2行目以降字下げ

字下げ画像13

padding-left: 1em;
text-indent: -1em;

padding-left: 1em;
text-indent: -1em;

2行目以降詳しい説明

padding
を使い
左一文字分の空白を作ります。

これにより、
全てが字下げ状態になります。

字下げ画像14

そこへ、

text-indent: -1em;

マイナス一文字にして
1行目だけ左へ戻します。

これで、2行目以降字下げが完成します。

字下げ画像16

マイナスという単位が使えるのは
びっくりですね。

2行目字下げの html,css

html

字下げ画像05

css

字下げ画像04

結果

字下げ画像3
<html>

<p class="indent01">
ああああああああああ<br>
いいいいいいいいいい<br>
うううううううううう<br>
</p>
<css>

.indent01 {
font-size: 32px;
padding-left: 1em;
text-indent: -1em;
}

まとめ

2行目以降字下げ

2行目以降字下げは

padding-left: 1em;

字下げ画像14

text-indent: -1em;

字下げ画像16
padding-left: 1em;
text-indent: -1em;

今回の話は、ここまでです。

(おまけ)
hanging
each-line

unofficial value(非公式の価値)
らしいです。

hanging、each-line
どちらも正常に
機能しませんでした。

以上、
2行目以降字下げは
padding-left: 1em; text-indent -1em;
で解決(html,css)
の話しでした。

ありがとうございました。

タイトルとURLをコピーしました