line-height

p.test { line-height: 1.4;}
p.test1 { line-height: 30px;}
p.test2 { line-height: normal;}

<p style="line-height: normal;">ここはp要素です。『line-height: <span style="color: #f00;">normal</span>』と指定しています。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

<p style="line-height: 30px;">ここはp要素です。『line-height: <span style="color: #f00;">30px</span>』と指定しています。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

<p style="line-height: 2.0;">ここはp要素です。『line-height: <span style="color: #f00;">2.0</span>』と指定しています。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

行ボックスの最小の高さを指定できます。最小の高さを定義するプロパティである、ということに注意してください。行ボックスの高さは置換要素などの高さや『vertical-align』プロパティで指定した場合の垂直方向のアラインメントも加算されるため、『line-height』プロパティで指定した値よりも大きくなる場合があります。

値を『px』などの絶対値で指定する場合はそのままその値が行ボックスの高さとして設定されます。その値はそのまま子孫要素に継承されます。

<div style="font-size: 20px; line-height: 30px; border: solid 1px #000;">
	ここはdiv要素です。『font-size: 20px』、『line-height: 30px』と指定しています。『line-height』の大きさはそのまま『30px』です。
</div>

<div style="font-size: 15px; line-height: 30px; border: solid 1px #000;">
ここはdiv要素です。『font-size: 15px』、『line-height: 30px』と指定しています。『line-height』は『30px』です。
<p style="color: #00f; border: solid 1px #00f; margin: 10px;">ここはdiv要素の子要素のp要素です。『line-height』の指定はありませんが、親要素の『line-height』を継承するため『line-height』は『30px』となります。<br><span style="color: #f00; display: block; border: solid 1px #f00; margin: 10px;">ここはp要素の子要素のspan要素です。『line-height』の指定はありませんが、親要素の『line-height』を継承するため『line-height』は『30px』となります。</span></p>
</div>

『em』や『%』などの単位を使用した相対的な数値で指定すると現在のフォントサイズから計算された値が『line-height』の値として設定されます。

<div style="font-size: 20px; line-height: 1.5em; border: solid 1px #000;">
	ここはdiv要素です。『font-size: 20px』、『line-height: 1.5em』と指定しています。『line-height』の計算結果は『30px』です。
</div>

『em』や『%』などの単位をつけた相対的な数値で指定した場合、自身のフォントサイズから計算された『line-height』の大きさがそのままの値で子孫要素に継承されます。『計算された大きさがそのままの値で継承されてしまう』というところにご注意ください。

<div style="font-size: 15px; line-height: 2.0em; border: solid 1px #000;">
ここはdiv要素です。『font-size: 15px』、『line-height: 2.0em』と指定しています。『line-height』は『30px』です。
<p style="color: #00f; border: solid 1px #00f; margin: 10px;">ここはdiv要素の子要素のp要素です。『line-height』の指定はありませんが、親要素のフォントサイズから計算された『line-height』の大きさをそのまま継承するため『line-height』は『30px』となります。<br><span style="color: #f00; display: block; border: solid 1px #f00; margin: 10px;">ここはp要素の子要素のspan要素です。『line-height』の指定はありませんが、親要素のフォントサイズから計算された『line-height』の大きさをそのまま継承するため『line-height』は『30px』となります。</span></p>
</div>

値を『単位なしの数値』で指定すると、その『単位なしの数値』に今現在のフォントサイズを掛け算したものが『line-height』の値として設定されます。例えば、『font-size: 20px』で、『line-height: 1.5』とした場合の『line-height』の大きさは『30px』となります。

<div style="font-size: 20px; line-height: 1.5; border: solid 1px #000;">
	ここはdiv要素です。『font-size: 20px』、『line-height: 1.5』と指定しています。『line-height』の大きさは『30px』です。
</div>

値を『単位なしの数値』で指定した場合も子孫要素に『line-height』の値が継承されますが、自身のフォントサイズから計算された『line-height』の大きさがそのままの値で継承されることはありません。子孫要素はそれぞれのフォントサイズから計算された値を自身の行ボックスの高さとします。

<div style="font-size: 15px; line-height: 2.0; border: solid 1px #000;">
ここはdiv要素です。『font-size: 15px』、『line-height: 2.0』と指定しています。『line-height』は『30px』です。
<p style="font-size: 18px; color: #00f; border: solid 1px #00f; margin: 10px;">ここはdiv要素の子要素のp要素です。『font-size: 18px』と指定しています。『line-height』の指定はありませんので、親要素の『line-height: 2.0』を継承します。親要素のフォントサイズから計算された『line-height』の大きさがそのまま継承されるわけではありません。この要素の『line-height』の大きさは『36px』です。<br><span style="font-size: 20px; color: #f00; display: block; border: solid 1px #f00; margin: 10px;">ここはp要素の子要素のspan要素です。『font-size: 20px』と指定しています。『line-height』の指定はありませんので、親要素の『line-height: 2.0』を継承します。親要素のフォントサイズから計算された『line-height』の大きさがそのまま継承されるわけではありません。この要素の『line-height』の大きさは『40px』です。</span></p>
</div>

『line-height』で相対的な値を取りたい場合は上記の通り、『単位ありの数値』で指定してしまうと子要素に意図しない継承をさせてしまう可能性がありますので『単位なしの数値』で構築するのが推薦されています。

尚、『line-height』は行間の大きさを指定するプロパティではなく『行ボックス』の大きさを指定するプロパティになります。『vertical-align』プロパティの項目も合わせて御覧ください。