行間と文字間

博士Ｈ：

今回は、いろんな"間"についてじゃ。

生徒Ａ：

間って、マージンがあったじゃないですか。

博士Ｈ：

いやいや、間というのは、文字や行の間じゃ。

生徒Ｂ：

ああ、もしかして
インライン要素にはマージン無効なの？

博士Ｈ：

そのとおりじゃ。

では、まずその行間のことからやっていこうかの。
行間を指定するプロパティはこれじゃ。
line-height

生徒Ａ：

あれ？　行の間じゃなくて、高さなんですか？

博士Ｈ：

うむ、良いところに気が付いたの。
そのとおりなのじゃ。
これを文字サイズ以下にすると、
次の行が前の行の上に乗っていくのじゃよ。

生徒Ｂ：

つまり、文字が重ねられるってこと？

博士Ｈ：

そうじゃ。
以下の図のような演出も可能じゃ。

生徒Ａ：

へー、うまいこと出来てますねー。。

博士Ｈ：

次は、文字の間じゃ。
文字の間とは、
文　字　と　文　字　の　間　じゃ。

これはletter-spacingで指定するのじゃ。
これには、長さの単位が指定可能じゃ。

生徒Ａ：

そうですね、
初期では詰まりすぎてますもんね、
ちょっとだけ間を開けることにします。

生徒Ｂ：

博士、なんか2回brで改行しても
1回分しか改行されないみたいなんだけど。

博士Ｈ：

そういう時は、brのletter-spacingを
ゼロにしておくと良いぞい。

要するにバグなんじゃが。

おや、今回は短く終わったの。
復習はきちんとするのじゃぞー。

生徒Ａ：
生徒Ｂ：

はーい。