We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

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

初期値normal
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
相対値の基準要素自身のフォントサイズ
メディアvisual
計算値パーセンテージか length を指定すると絶対的な値、それ以外は指定通り
Animation typeeither number or length
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
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  おそらく、望む結果ではないでしょう -->

結果:

仕様

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

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0[1] 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0[1]
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0[1] 1.0 (1) 6.0[1] 6.0 1.0[1]

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

関連情報

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

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