CSSline-height プロパティは、テキストのような行で使われる空間の量を設定します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

構文

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

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

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

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

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

line-height プロパティは以下のうちの一つで指定します。

normal
ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。
<number> (単位なし)
使用値は、この単位のない <number> に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height を設定する好ましい方法です
<length>
行ボックスの高さの計算に、指定した <length> が使われます。利用可能な単位については、 <length> をご覧ください。
<percentage>
要素自身のフォントサイズに対する相対値です。計算値はこの <percentage> に要素のフォントサイズの計算値を掛けたものです。パーセント値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。
-moz-block-height
行の高さを現在のブロックのコンテンツの高さにします。

形式文法

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 { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* 一括指定 */

line-height を設定するには、上記の font 一括指定プロパティがより便利なことが多いのですが、同時に font-family プロパティも指定しなければなりません。

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

以下の例は、line-height の値として <length> より <number> のほうが好ましい理由を示しています。 2 つの <div> 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの line-height の値を使用しています。二番目は赤色の境界を持っており、 line-height の値を em で定義して使用しています。

CSS

.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;
}

HTML

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

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

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

結果

アクセシビリティの考慮事項

主要な段落コンテンツでは、 line-height の値の最小値が 1.5 になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。

Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

仕様書

仕様書 状態 備考
CSS Transitions
line-height の定義
草案 line-height をアニメーション可能として定義
CSS Level 2 (Revision 1)
line-height の定義
勧告 変更なし
CSS Level 1
line-height の定義
勧告 初回定義

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
パーセンテージ要素自身のフォントサイズ
メディア視覚
計算値パーセンテージか length を指定すると絶対的な値、それ以外は指定通り
アニメーションの種類either number or length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
-moz-block-height なし なし3.6 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり12461 あり
-moz-block-height なし なし なし4 なし なし なし

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, Prinz_Rana, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,