line-heightの単位について

line-heightについて

line-heightプロパティは、行の高さを指定する時に使用します。
line-heightとは、 例えばfont-sizeを10pxとしてline-heightを20pxに設定します。 行の高さ20pxからフォントサイズ10pxを引いた残りの10pxが、行間として上下均等に5pxずつ割り振られます。
行の高さには負の値を指定することはできません。単位は[px]、[em]、[ex]などの単位で指定する方法と%やemの相対単位を使用する方法があります。更に特殊な方法として単位を何もつけない倍数設定の方法もあります。

line-heightの単位の問題

line-height:1em の値にemの単位を付けた場合、例えば文中のstrong要素で文字サイズを大きくした場合に親要素のline-height:1emがそのまま継承されて1emの計算結果、つまり親要素のフォントサイズの大きさのままになります。line-height:1とした場合は計算値ではなく1倍、2倍が継承されるためstrong要素のフォントサイズに指定値を積算した行高さになります。

以下参考例です。上の段落がline-height:1emの設定で、下の段落はline-height:1の設定になっています。

line-height:1emの場合、親要素フォントサイズが16pxなら1emの計算結果16pxが継承されて子要素のフォントが入りきれなくなります。

吾輩（わがはい）は猫である。名前はまだ無い。
どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。

line-height:1の場合、子要素のstrong要素のフォントサイズを変えても、そのフォントサイズの1倍になるため問題は出ません。

吾輩（わがはい）は猫である。名前はまだ無い。
どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。

このようなことから、通常line-heightの単位は何もつけない方法を取る場合が多いです。あれ？単位を付け忘れている！などと言わないようにしましょう。