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 になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。

W3C Understanding WCAG 2.1

仕様書

仕様書 状態 備考
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
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
-moz-block-height
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 3.6IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

関連情報

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

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