line-heightでの単位指定
#（ ◎Д）y-~~『
div.section p {line-height: 1.5em;}で数字の部分を調整するのだね。きっとそうだ。』
上の記述を呼んでおやっと思いました。私のCSSにおける単位指定のやり方は「font-sizeは%単位、marginやpaddingはem単位、line-heightは単位無指定」と決めていたからです。しかし、どういう理由でline-heightは単位無指定にしていたのか思い出せなかったため（だめだめです）、調べてみました。
先に結論を書くと、「line-height: 1.5;」という指定の方が「line-height: 1.5em;」という指定に比べて、より柔軟です。後者のように指定した場合、文章中で文字を大きくしたときに文字が重なり合う可能性があります*1。具体的な表示例を作成してみました。
前者も後者も「行送りがフォントサイズの1.5倍」という点では同じですが、その内側でフォントサイズを変更したときに違いが生じます。前者の場合はフォントサイズの変化と同じ割合で行間が変化するのに対し、後者の場合はフォントサイズが変化しても行間は変わりません。
どうしてこのような違いが生じるのでしょうか。
REC-CSS2 邦訳の10.8 行の高さを計算するによれば、単位なしの実数値指定とem単位指定はほとんど同じですが、前者では「継承には算出値ではなく指定値を用いる
」のに対し、後者では算出値を用いる点に違いがあります。
ここでいう「指定値」とか「算出値」とか「継承」とは何でしょうか。CSSの基本に立ち返って若干解説します。詳しくは指定値、算出値、実効値を参照して下さい。
スタイルシートでの値指定に用いる単位は、長さに用いるものだけでも様々なものがあります。この中でcmやmmなどそれだけで長さがわかるものは絶対値、emや%など他の単位を参照した上で実際の長さが算出されるものを相対値と呼びます。line-heightを例に取って見てみましょう。ある要素に「line-height: 1.5em;」という指定を行うと、その要素のフォントサイズの1.5倍の行送りを指定することになります。
p {
font-size: 12mm;
line-height: 1.5em;
}
printメディアでの指定なら別ですが。）))。ここでの「1.5em」が「指定値」（つまり指定された値ですね）で、それを用いて算出された「18mm」が「算出値」というわけです。
さて、CSSでは「継承」ということが普通に行われています。簡単に言うと、継承とは「（特に指定しない限り）内側にある要素では外側の指定が引き継がれる」ということです。例えば、body要素で文字色を赤に指定したら、その内部にある要素は全て文字色が赤になります*2。継承されるかどうかはプロパティごとに決められており、line-heightでは継承が行われます。
次のようなコードを考えてみます。
<div style="font-size:10mm; line-height:1;">
<p style="font-size:20mm;">line-heightのテスト。</p>
</div><div style="font-size:10mm; line-height:1;">
<p style="font-size:20mm; line-height:1;">line-heightのテスト。</p>
</div><div style="font-size:10mm; line-height:1em;">
<p style="font-size:200%;">line-heightのテスト。</p>
</div><div style="font-size:10mm; line-height:1em;">
<p style="font-size:20mm; line-height:10mm;">line-heightのテスト。</p>
</div>line-height: 1.5em;」という記述は「行送りはフォントサイズの1.5倍」というつもりだと思うのですが、厳密にはそのような意味にはなっていません。継承を考慮しなければ単位指定によらず同じになるのですが、実際にはこのような違いが生じてしまうことはあまり知られていないのかもしれません。
なお、Netscape Navigator 4.x では、単位なしの実数値指定でも算出値が継承されてしまうという不具合があるそうです（http://members.at.infoseek.co.jp/cssbug/detail/nn4x/b015.html）。
line-heightについてもう少しもご参照下さい。
