CSS3: line-height プロパティ - 行の高さ

■ 概要

項  目説  明
記述形式 セレクタ {line-height: }
値 の形式 normalnone | 数値 (単位なし,長さ,%
初 期 値 normal
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継  承 する

■ 解説

line-heightプロパティ は,行の高さ を指定します。

指定できる値の形式は,以下のとおりです。

指定方法 説 明
キーワード
で指定
 normal
フォントサイズなどによって決まる標準の行の高さです。 (初期値)
数値で指定  px
数値に px の単位をつけて指定します。 px とは1ピクセルを1とする単位で,実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
 em
数値に em の単位をつけて指定します。 em とは現在使用中の標準フォントの高さを1とする単位です。 
 ex
数値に ex の単位をつけて指定します。 ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
 
フォントのサイズを基準にして割合を%値で指定します。
 数値
単位なしの数値を指定した場合,フォントサイズとその数値を掛けた値が行の高さになります。 したがって,「2」と書いた場合は,「200%」や「2em」と書いた場合と同じことになります。

なお,行間の値は,行間行の高さフォントサイズ となります。 より正確に言うと,たとえば,行の高さが 20px で,フォントサイズが 12px の場合は,これらの差 8px の半分の 4px が上下に振り分けられますので,同じ高さの行の場合では,行間は前の行の分と合わせてやはり 8px になります。

さらに,フォントサイズ > 行の高さ となった場合には,行同士重なり合って表示されることになります。

■ 使用例( line-height プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   div.sample {
      width: 20em;
      margin: 10px auto;
      padding: 5px;
      border: 2px solid #8c8c8c ;
   }
   .lheight1 { line-height: normal; }
   .lheight2 { line-height: 25px; }
   .lheight3 { line-height: 1.5em; }
   .lheight4 { line-height: 2.2ex; }
   .lheight5 { line-height: 150%; }
-->
</style>
HTML
<body> ~ </body>
<div class="sample lheight1">
   行の高さ "normal" です。<br>行の高さ "normal" です。<br>行の高さ "normal" です。<br>
</div>
<div class="sample lheight2">
   行の高さ "25px" です。<br>行の高さ "25px" です。<br>行の高さ "25px" です。<br>
</div>
<div class="sample lheight3">
   行の高さ "1.5em" です。<br>行の高さ "1.5em" です。<br>行の高さ "1.5em" です。<br>
</div>
<div class="sample lheight4">
   行の高さ "2.2ex" です。<br>行の高さ "2.2ex" です。<br>行の高さ "2.2ex" です。<br>
</div>
<div class="sample lheight5">
    行の高さ "150%" です。<br>行の高さ "150%" です。<br>行の高さ "150%" です。<br>
</div>

ブラウザー 表示例
行の高さ "normal" です。
行の高さ "normal" です。
行の高さ "normal" です。
行の高さ "25px" です。
行の高さ "25px" です。
行の高さ "25px" です。
行の高さ "1.5em" です。
行の高さ "1.5em" です。
行の高さ "1.5em" です。
行の高さ "2.2ex" です。
行の高さ "2.2ex" です。
行の高さ "2.2ex" です。
行の高さ "150%" です。
行の高さ "150%" です。
行の高さ "150%" です。

■ 備考

【参考ページ】