line-height

概要

CSS の line-height プロパティは、ブロックレベル要素に含まれるラインボックスの、最小の高さを定義します。

非置換インライン要素では、line-height は行ボックスの高さの計算に使われる、高さを定義します。ボタンやその他の入力要素などの置換インライン要素では、line-height は効果を持ちません。[1]

構文

/* キーワード値 */
line-height: normal;

/* 単位なし: この値を要素のフォントサイズに掛ける */ 
line-height: 3.5;

/* <length> 値 */
line-height: 3em;

/* <percentage> 値 */
line-height: 34%;

/* グローバル値 */
line-height: inherit;
line-height: initial;
line-height: unset;

値

normal

ユーザエージェント依存です。デスクトップブラウザ（Firefox を含む）は 要素の font-family によって決まる、おおよそ 1.2 というデフォルト値を使います。

<number>

使用値は、この単位のない <数量> に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height をセットする好ましい方法です。

<length>

行ボックスの高さの計算に、指定した <length> が使われます。利用可能な単位については、 <length> をご覧ください。

<percentage>

要素自身のフォントサイズが基準になります。計算値はこのパーセンテージに要素のフォントサイズの計算値を掛けたものになります。
パーセンテージ と em 値は、予期しない結果を生むかもしれません。"注記" 欄をご覧ください。

形式文法

normal | <number> | <length> | <percentage>

例

/* 以下のルールの結果はすべて、同じ line height です */

div { line-height: 1.2;   font-size: 10pt }   /* number */ 
div { line-height: 1.2em; font-size: 10pt }   /* length */ 
div { line-height: 120%;  font-size: 10pt }   /* percentage */
div { line-height: 12pt;  font-size: 10pt }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

注記

• 上の例にあるように、多くの場合、line-height を font ショートカットを使ってセットすると便利です

line-height の値は単位なしの数値が好ましい

以下の例は、line-height の値として <length> より <number> のほうが好ましい理由を示しています。

この例では、2 つの <div> 要素を使用しています。ボーダーが緑色である 1 番目の div 要素は、line-height で単位なしの値を使用しています。ボーダーが赤色である 2 番目の div 要素は、line-height で length 値を使用しています。

.green {
  line-height: 1.1;
  border: solid limegreen;
}
.red {
  line-height: 1.1em;
  border: solid red;
}
h1 {
  font-size: 30px;
}
.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

2 つのボックスがある HTML:

<div class="box green">
 <h1>単位なしの line-height を使い、予期しない結果を避けてください！</h1>
  line-height を length と percentage で指定すると、継承動作がうまくいきません。 ...
</div>

<div class="box red">
 <h1>単位なしの line-height を使い、予期しない結果を避けてください！</h1>
  line-height を length と percentage で指定すると、継承動作がうまくいきません。 ...
</div>

<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  --> 
<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう -->

結果:

仕様

ブラウザ実装状況

[1] Webkit と Trident のどちらも、ボタンのような置換インライン要素に対して正しい挙動が実装されていません。これらのエンジンでは、置換インライン要素に line-height が効果を持つ場合があります。仕様上、これは正しくありません。

関連情報

• font, font-size