line-height

行の高さを指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ line-height : 値; }

▲PageTop

指定できる値

値 初期値 意味
normal ○ 指定しない場合と同様になります。
数値 フォントサイズに数値を掛けた行間になります。
数値+単位 高さを指定します。単位例：px,em,ex,%
数値+% フォントサイズに%を掛けた行間になります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        font-size : 12pt;
        line-height : 4;
        border : solid 1px #999999;
      }
      #sample2 {
        font-size : 12pt;
        line-height : 2em;
        border : solid 1px #999999;
      }
      #sample3 {
        font-size : 12pt;
        line-height : 120%;
        border : solid 1px #999999;
      }
    </style>
  </head>
  <body>
    <div id="sample1">line-heightサンプル1</div>
    <br>
    <div id="sample2">line-heightサンプル2</div>
    <br>
    <div id="sample3">line-heightサンプル3</div>
  </body>
</html>

表示結果

line-heightサンプル1

line-heightサンプル2

line-heightサンプル3

▲PageTop

関連項目

CSS

font / font-size / layout-grid-line

▲PageTop

▲