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 にも適用されます。
継承あり
パーセンテージ要素自身のフォントサイズ
メディアvisual
計算値パーセンテージか length を指定すると絶対的な値、それ以外は指定通り
アニメーションの種類either number or length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり12461 あり

関連情報

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

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