line-height 行間の設定

(設定値）
　＜normal＞･･･初期値、ユーザーの環境に依存（通常は約1.2倍）
　＜単位で指定＞･･･cm，mm，em，px、pt などの単位で指定
　＜%＞　･･･font-sizeを100%とした場合の割合。例えば、200%指定は現在のフォントサ　　　　　　イズの2倍に、即ち行間が1行分だけあく(2emと等価)
　＜数値＞･･･font-sizeを１とした場合の割合を小数で設定。
　　　　　　　　（例　1.6　･･･160%と同じ）

Sample

このサンプルでは、FontSizeが14pxで，行間指定は設定していません	このサンプルでは、FontSizeが14pxで，行間指定は 14px に設定している。	このサンプルでは、FontSizeが14pxで、行間指定は 30px に設定している。	このサンプルでは、FontSizeが14pxで，行間指定は 14pt に設定している。
このサンプルでは、FontSizeが14pxで、行間指定は 8mm に設定している。	このサンプルでは、FontSizeが14pxで、行間指定は 1cm に設定している。	このサンプルでは、FontSizeが14pxで、行間指定は 1.2cm に設定している。	このサンプルでは、FontSizeが14pxで，行間指定は 90% に設定している。
このサンプルでは、FontSizeが14pxで、行間指定は 150% に設定している。	このサンプルでは、FontSizeが14pxで、行間指定は 0.9 に設定している。	このサンプルでは、FontSizeが14pxで、行間指定は 1.5 に設定している。	このサンプルでは、FontSizeが14pxで，行間指定は 0 に設定している。

これは１行目
これは２行目
これは３行目
これは４行目

リストにもline-height 行間の設定を利用できる

■line-heightを200%、150%、100%、80%、50%、10%に設定。見比べてください

Line:200%
Line:200%
Line:200%

Line:150%
Line:150%
Line:150%

Line:100%
Line:100%
Line:100%

Line:80%
Line:80%
Line:80%

Line:50%
Line:50%
Line:50%

■line-heightの活用

HomePage

HTML

CSS Style

Sample Source......................................................................>>>

<table border="1" style="font-size:12px;">
  <tr>
    <td>このサンプルでは、FontSizeが14pxで，行間指定は 設定していません</td>
    <td style="line-height:14px">このサンプルでは、FontSizeが14pxで，
          行間指定は 14px に設定している。</td>
    <td style="line-height:30px">このサンプルでは、FontSizeが14pxで、
          行間指定は 30px に設定している。</td>
    <td style="line-height:14pt">このサンプルでは、FontSizeが14pxで，
          行間指定は 14pt に設定している。</td>
  </tr><tr>
    <td style="line-height:8mm">このサンプルでは、FontSizeが14pxで、
          行間指定は 8mm に設定している。</td>
    <td style="line-height:1cm">このサンプルでは、FontSizeが14pxで、
          行間指定は 1cm に設定している。</td>
    <td style="line-height:1.2cm">このサンプルでは、FontSizeが14pxで、
          行間指定は 1.2cm に設定している。</td>
    <td style="line-height:90%">このサンプルでは、FontSizeが14pxで，
          行間指定は 90% に設定している。</td>
  </tr><tr>
    <td style="line-height:150%">このサンプルでは、FontSizeが14pxで、
          行間指定は 150% に設定している。</td>
    <td style="line-height:0.9">このサンプルでは、FontSizeが14pxで、
          行間指定は 0.9 に設定している。</td>
    <td style="line-height:1.5">このサンプルでは、FontSizeが14pxで、
          行間指定は 1.5 に設定している。</td>
    <td style="line-height:0">このサンプルでは、FontSizeが14pxで，
          行間指定は 0 に設定している。</td>
  </tr>
</table>
<ol style="line-height:0.8">
  <li>これは１行目
  <li>これは２行目
  <li>これは３行目
  <li>これは４行目
</ol>

<table style="font:16pt 'Times New Roman'" border="1" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td><p style="line-height:200%"><u>Line:200%</u><br>
    <u>Line:200%</u><br>
    <u>Line:200%</u></td>
    <td><p style="line-height:150%"><u>Line:150%</u><br>
    <u>Line:150%</u><br>
    <u>Line:150%</u></td>
    <td><p style="line-height:100%"><u>Line:100%</u><br>
    <u>Line:100%</u><br>
    <u>Line:100%</u></td>
    <td><p style="line-height:80%"><u>Line:80%</u><br>
    <u>Line:80%</u><br>
    <u>Line:80%</u></td>
    <td><p style="line-height:50%"><u>Line:50%</u><br>
    <u>Line:50%</u><br>
    <u>Line:50%</u></td>
    <td><p style="line-height:10%"><u>Line:10%</u><br>
    <u>Line:10%</u><br>
    <u>Line:10%</u></td>
  </tr>
</table>

<p>■line-heightの活用</p>
<div style="font:900 40pt 'Arial Black';line-height:20pt;">
    <div style="color:#404040;text-indent:50px;">
        HomePage</div>
    <div style="color:green;text-indent:100px;">
        HTML</div>
    <div style="color:red;text-indent:150px;">
        CSS Style</div>
</div>