line-heightプロパティは、行の高さを指定する際に使用します。行の高さには負の値を指定することはできません。
行の高さとフォントサイズの関係ですが、
例えばline-heightが20pxでfont-sizeが14pxの場合、
20px(行の高さ)から14px(フォントサイズ)を引いた残りの6pxが、行間として上下均等に3pxずつ割り振られます。
また、例えばline-heightが10pxでfont-sizeが14pxなど、行の高さがフォントサイズより小さな値の場合には、
行が重なって表示されます。
尚、line-heightプロパティは使い方とブラウザの種類により、表示や印刷に不具合が出る場合があります。例えばNetscape
Navigator4.xでは、line-heightプロパティを適用した範囲内に画像とテキストが混在していると、
画像とテキストが重なって表示されてしまうので注意してください。
p.sample1 {line-height: normal;}
p.sample2 {line-height: 15px;}
p.sample3 {line-height: 1.5;}
p.sample4 {line-height: 200%;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>
春はあけぼの。やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。
</p>
<p class=”sample2″>
夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうち光かりて行くもをかし。雨など降るもをかし。
</p>
<p class=”sample3″>
秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねてたるが、いと小さく見ゆるはいとをかし。日いりはてて、風の音、虫の音などいとあわれなり。
</p>
<p class=”sample4″>
冬はつとめて。雪の降りたるはいふべきにあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭もてわたるもいとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし。
</p>
</body>
</html>
春はあけぼの。やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。
夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうち光かりて行くもをかし。雨など降るもをかし。
秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねてたるが、いと小さく見ゆるはいとをかし。日いりはてて、風の音、虫の音などいとあわれなり。
冬はつとめて。雪の降りたるはいふべきにあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭もてわたるもいとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし。