mozilla
Your Search Results

    line-height

    概要

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

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

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

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

    構文

    形式文法: 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> をご覧ください。
    <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 をアニメーション可能として定義
    CSS Level 2 (Revision 1) 勧告 変更なし
    CSS Level 1 勧告 初回定義

    ブラウザ実装状況

    機能 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 が効果を持つ場合があります。仕様上、これは正しくありません。

    関連情報

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

    Contributors to this page: ethertank, sosleepy
    最終更新者: ethertank,
    サイドバーを隠す