line-height の値には単位なしが良いとされる理由

CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。

単位ありと単位なしの違い

手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size を px 指定してみた。

サンプルの上段には line-height の値に単位をつけて指定。

p {
  font-size: 16px;
  line-height: 1em;
}
p em {
  font-size: 24px;
}

サンプルの下段には line-height の値に単位をつけずに指定。

p {
  font-size: 16px;
  line-height: 1;
}
p em {
  font-size: 24px;
}

サンプルを見てみると、p 要素自体の行ボックスの高さは同じなのに、その子要素である em 要素の行ボックスの高さに相違がみられる。つまり、子孫要素への継承のされ方が違っているって事になる。実際に line-height 値がそれぞれどうなってるのかを表すと下記のようになる。

line-height の値に単位をつけて 1em とした場合
p {
  font-size: 16px;
  line-height: 1em = 16px;
}
p em {
  font-size: 24px;
  line-height: 16px;
}
line-height の値に単位をつけずに 1 とした場合
p {
  font-size: 16px;
  line-height: 1 = 16px;
}
p em {
  font-size: 24px;
  line-height: 24px;
}

em や パーセントなどの単位ありで指定すると、まず line-height 値に font-size と掛け合わせた計算値が使用される。この場合、p 要素のフォントサイズは 16px なんで 行ボックスの高さも 16px になる。んで、この計算値が子孫要素にそのまま継承されてしまう。つまり、子孫要素である em 要素の行ボックスの高さも 16px となってしまう。

一方、単位なしで指定すると、line-height 値には同じく font-size と掛け合わせた計算値 16px が指定される。そして、子孫要素である em にはこの計算値ではなく指定値である 1 が継承され、em の font-size と掛け合わせた数値 24px が行ボックスの高さになる。

CSS の「inherit」で継承されるのは Computed value 以外にありえない(と思ってる) - IT戦記」で言及して頂きましたが、「指定値が継承される」という言い回しは CSS2 の line-height の仕様 に従っています。CSS 2.1 の仕様に従うのならば、「指定値と同じ計算値が継承される」ってな感じの言い回しになるかと思います。ということを一応、追記しておきます。amachang さん、ご指摘頂きありがとうです。

単位なしで指定しておいた方がお薦め

上記の結果を見ると、単位ありで指定してしまうと、その要素の子孫要素で行ボックスの高さが意図していないものになってしまう可能性がある。親要素に単位なしの値で line-height を指定することで、子孫要素でいくら font-size を変えようが、それに合わせて行ボックスの高さを要素ごとに計算してくれるわけだから、出来るだけ単位なし (number) で指定しておくことをお薦めする。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/36

hxxk.jp - line-height プロパティに関する簡単なまとめ (2006年4月11日 23:49)

line-height プロパティ関連の話を CSS の仕様の面か... 続きを読む

Richard on Web - CSSのline-heightについて (2006年4月21日 22:16)

Lucky bagさんのLucky bag::blog: line-height... 続きを読む

Web標準にアプローチ 〔まいまいのお宿。〕 - 行間指定「line-height」の使い方 (2007年3月 4日 12:01)

Web標準の教科書スタイルシートスキルアップ・デザインブック(1)スタイルシートスキルアップ・デザインブック(2)スタイルシート・デザインちゃんとCSSす... 続きを読む

Cyber Support - ブログで巨大な文字が重なる? Line-heightのはなし (2007年3月17日 08:01)

自社サイトをMovable Typeによるビジネスブログでリニューアルしようとされているお客様から、「ブログに大きな文字を入れると重なる」という指摘をいた... 続きを読む

Takazudo Clipping* - 標準モードでfont-sizeとline-heightがtableに継承されない問題の解消 (2007年4月21日 13:28)

以下のような指定をすると、 .body{ font-size:80%; line-height:1.4; } ページの中の要素が全て少し小さめの、fo... 続きを読む

Blog --- WEBデザインのリンク集 : ikesai.com - line-heightのバグ (2007年5月 9日 16:02)

木達さんブログ経由で見つけた情報。 なんでも、line-heightを単位なして... 続きを読む

Comments

シンヤ said:

うろ覚えですが、確かネットスケープ 4 では line-height の値に単位があると印刷時に物凄い行間が空くというバグもあったと思います。恐ろしくうろ覚えです。はい。

e-luck said:

確か、ネスケ 4 は親要素の計算値をそのまま継承するんでしたっけ(うろ覚え
バグと言えば、IE3 の px として解釈しちゃうってのが有名ですよね。

ばあど said:

更新できない期間中、見事に先を越されてしまいました(汗

はい、確かに NN4.xx ではバグがあります。
印刷だけではなく、表示上でも、確か img が絡むと高さが補正されずにはみ出したような・・・?

e-luck said:

>>ばあど さん

どもども、精進(謎)させて頂いてます :-)
img が絡むやつってのは、ここら辺っすね。

http://cssbug.at.infoseek.co.jp/detail/nn4x/b002.html

ばあど said:

それですそれです。
一番対処に苦慮したかも。

あおたん said:

line-heightに単位していしないと、W3CのCSS Validator でエラーがでませんか?

e-luck said:

それは CSS Validator のバグですね。

http://www.w3.org/Bugs/Public/show_bug.cgi?id=2307

1 などの整数値を単位なしで指定した場合にエラーが出るようです。もし、それが嫌であれば line-height: 1.0; と小数点つきの実数値で指定すればエラーは出ません。ただ、小数点なしでも valid であることに間違いはありません。

ばあど said:

16日に発見したので、ネタにしようと思っていたのに>line-heightのバグ(笑
また先を越されてしまいましたな。

e-luck said:

また先を越しちゃいましたか ;-)