行間と文字間
![博士H:](../style/hakase.gif)
今回は、いろんな"間"についてじゃ。
![生徒A:](../style/seitoa.gif)
間って、マージンがあったじゃないですか。
![博士H:](../style/hakase.gif)
いやいや、間というのは、文字や行の間じゃ。
![生徒B:](../style/bSee.gif)
ああ、もしかして
インライン要素にはマージン無効なの?
![博士H:](../style/hakase.gif)
そのとおりじゃ。
では、まずその行間のことからやっていこうかの。
行間を指定するプロパティはこれじゃ。
line-height
![生徒A:](../style/aHatena.gif)
あれ? 行の間じゃなくて、高さなんですか?
![博士H:](../style/hakase.gif)
うむ、良いところに気が付いたの。
そのとおりなのじゃ。
これを文字サイズ以下にすると、
次の行が前の行の上に乗っていくのじゃよ。
![生徒B:](../style/seitob.gif)
つまり、文字が重ねられるってこと?
![博士H:](../style/hakase.gif)
そうじゃ。
以下の図のような演出も可能じゃ。
![](lin-hgt.gif)
![生徒A:](../style/aAmaze.gif)
へー、うまいこと出来てますねー。。
![博士H:](../style/hakase.gif)
次は、文字の間じゃ。
文字の間とは、
文 字 と 文 字 の 間 じゃ。
これはletter-spacingで指定するのじゃ。
これには、長さの単位が指定可能じゃ。
![生徒A:](../style/seitoa.gif)
そうですね、
初期では詰まりすぎてますもんね、
ちょっとだけ間を開けることにします。
![生徒B:](../style/bAnger.gif)
博士、なんか2回br
で改行しても
1回分しか改行されないみたいなんだけど。
![博士H:](../style/hakase.gif)
そういう時は、br
のletter-spacing
を
ゼロにしておくと良いぞい。
要するにバグなんじゃが。
おや、今回は短く終わったの。
復習はきちんとするのじゃぞー。
![生徒A:](../style/seitoa.gif)
![生徒B:](../style/bFuzake.gif)
はーい。