 サンプル - Microsoft Internet Explorer |
|
20pxを 40pxを 200%を 2を |
行の間隔を指定する
■line-height:
指定できる値
スタイルシートでの単位
数値にpxなどの単位をつけて指定する
比率で指定
数値（単位はつけません）
キーワードで指定
normal 普通の状態
行の間隔を指定するには、line-heightプロパティを使います。
このプロパティは行の間隔を直接指定するわけではなく、文字の大きさに対して一行の高さを指定する事によって、結果的に行に間隔があきます。
わかりやすく言えば、文字の大きさが15mmで行の高さを20mmに設定すれば、5mmの行間が出来ます。値には、数値にptやemなどの単位をつけて指定します。パーセントや比率で親要素に対する相対的な指定方法も出来ます。
比率についてですが、これは単位をつける必要がなく、数値のみで指定します。
line-height:2というように記入すれば、親要素の行の高さ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>