point 行の間隔を指定する

line-height:

指定できる値
スタイルシートでの単位
数値にpxなどの単位をつけて指定する
比率で指定
数値(単位はつけません)
キーワードで指定
normal 普通の状態

行の間隔を指定するには、line-heightプロパティを使います。

このプロパティは行の間隔を直接指定するわけではなく、文字の大きさに対して一行の高さを指定する事によって、結果的に行に間隔があきます。

わかりやすく言えば、文字の大きさが15mmで行の高さを20mmに設定すれば、5mmの行間が出来ます。値には、数値にptやemなどの単位をつけて指定します。パーセントや比率で親要素に対する相対的な指定方法も出来ます。

比率についてですが、これは単位をつける必要がなく、数値のみで指定します。
line-height:2というように記入すれば、親要素の行の高さ2倍に指定することが出来ます。

行の間隔を適度にあけて、読みやすい文章にして下さいね。

サンプル - Microsoft Internet Explorer

20pxを
指定しました。

40pxを
指定しました。

200%を
指定しました。

2を
指定しました。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
body    { font-size  :10pt; }
.test1	{ line-height:20px; }
.test2	{ line-height:40px; }
.test3	{ line-height:200%; }
.test4	{ line-height:2;    }
-->
</style>
</head>
<body>
<p class="test1">20pxを<br>指定しました。</p>
<p class="test2">40pxを<br>指定しました。</p>
<p class="test3">200%を<br>指定しました。</p>
<p class="test4">2を<br>指定しました。</p>
</body>
</html> 
 

スポンサード・リンク