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

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS

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

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

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

line-heights-sample.html

サンプルの上段には 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) で指定しておくことをお薦めする。

2006-04-10T12:48:03+09:00 | コメント (9) | トラックバック (6) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/375

このリストは、次のエントリーを参照しています: line-height の値には単位なしが良いとされる理由:

hxxk.jp さんからのトラックバック: line-height プロパティに関する簡単なまとめ; line-height プロパティ関連の話を CSS の仕様の面か... [続きを読む]; 2006年04月11日 23:49

Richard on Web さんからのトラックバック: CSSのline-heightについて; Lucky bagさんのLucky bag::blog: line-height... [続きを読む]; 2006年04月21日 22:16

Web標準にアプローチ　〔まいまいのお宿。〕さんからのトラックバック: 行間指定「line-height」の使い方; Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）スタイルシート・デザインちゃんとCSSす... [続きを読む]; 2007年03月04日 12:01

Cyber Support さんからのトラックバック: ブログで巨大な文字が重なる？ Line-heightのはなし; 自社サイトをMovable Typeによるビジネスブログでリニューアルしようとされているお客様から、「ブログに大きな文字を入れると重なる」という指摘をいた... [続きを読む]; 2007年03月17日 08:01

Takazudo Clipping* さんからのトラックバック: 標準モードでfont-sizeとline-heightがtableに継承されない問題の解消; 以下のような指定をすると、 .body{ font-size:80%; line-height:1.4; } ページの中の要素が全て少し小さめの、fo... [続きを読む]; 2007年04月21日 13:28

Blog --- WEBデザインのリンク集 : ikesai.com さんからのトラックバック: line-heightのバグ; 木達さんブログ経由で見つけた情報。なんでも、line-heightを単位なして... [続きを読む]; 2007年05月09日 16:02

シンヤさんからのコメント: うろ覚えですが、確かネットスケープ 4 では line-height の値に単位があると印刷時に物凄い行間が空くというバグもあったと思います。恐ろしくうろ覚えです。はい。; 2006年04月10日 18:56

e-luck さんからのコメント: 確か、ネスケ 4 は親要素の計算値をそのまま継承するんでしたっけ（うろ覚え
バグと言えば、IE3 の px として解釈しちゃうってのが有名ですよね。; 2006年04月10日 22:56

ばあどさんからのコメント

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

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

2006年04月11日 23:46

e-luck さんからのコメント

>>ばあどさん

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

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

2006年04月12日 18:59

ばあどさんからのコメント: それですそれです。
一番対処に苦慮したかも。; 2006年04月12日 20:50

あおたんさんからのコメント: line-heightに単位していしないと、W3CのCSS Validator でエラーがでませんか？; 2006年04月18日 12:51

e-luck さんからのコメント

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

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

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

2006年04月18日 14:42

ばあどさんからのコメント: 16日に発見したので、ネタにしようと思っていたのに＞line-heightのバグ（笑
また先を越されてしまいましたな。; 2006年04月19日 00:33

e-luck さんからのコメント: また先を越しちゃいましたか ;-); 2006年04月19日 12:44

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog