概要

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

非置換インライン要素では、line-height は行ボックスの高さの計算に使われる、高さを定義します。

ボタンやその他の入力要素などの置換インライン要素では、line-height は効果を持ちません。[1]

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

構文

形式文法: normal | <number> | <length> | <percentage>
line-height: normal 
line-height: 3.5    /* <number> values */
line-height: 3em    /* <length> values */
line-height: 34%    /* <percentage values */

line-height: inherit

normal
ユーザエージェント依存です。デスクトップブラウザ(Firefox を含む)は 要素の font-family によって決まる、おおよそ 1.2 というデフォルト値を使います。
<number>
使用値は、この単位のない <数量> に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height をセットする好ましい方法です
<length>
行ボックスの高さの計算に、指定した <length> が使われます。利用可能な単位については、 <length> をご覧ください。</length></length>
<percentage>
要素自身のフォントサイズが基準になります。計算値はこのパーセンテージに要素のフォントサイズの計算値を掛けたものになります。
パーセンテージem 値は、予期しない結果を生むかもしれません。"注記" 欄をご覧ください。

/* 以下のルールの結果はすべて、同じ 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 ショートカットを使ってセットすると便利です
  • 単位なしの数値を使ったほうがよいでしょう:
    <style>
          .green { font-size: 15px;  line-height: 1.1;  border: solid limegreen; }
          .red   { font-size: 15px;  line-height: 1.1em;  border: solid red; }
          h1     { font-size: 30px; }
          div    { width: 19em;  display: inline-block; }
    </style>
    
    <div class=green>
     <h1>単位なしの line-height を使い、予期しない結果を避けてください!</h1>
      line-height を length と percentage で指定すると、継承動作がうまくいきません。 ...
    </div>
    
    <div class=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,  probably not what you want -->
    

    単位なしの line-height を使い、予期しない結果を避けてください!

    line-heightlengthpercentage で指定すると、継承動作がうまくいきません。実際には使うべきではありません。単位なしの line-height("1.1" のような)を使い続けてください。

    単位なしの line-height を使い、予期しない結果を避けてください!!

    line-heightlengthpercentage で指定すると、継承動作がうまくいきません。実際には使うべきではありません。単位なしの line-height("1.1" のような)を使い続けてください。

仕様

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

ブラウザ実装状況

機能 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]

Webkit 及び Trident (IE)

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

関連情報

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

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