line-height
Updated / Published
line-heightプロパティは行ボックスの最小の高さ（行の高さ）を指定します。行送りとも呼ばれます。行ボックスの高さとは行内の最上部にあるボックス上辺から、最下部にあるボックス下辺までの距離をいいます。ただし、行内に入力されるソースによって内容が置き換えられる置換インライン要素を行内に含む場合は、置換インライン要素に指定された heightプロパティの値、または置換インライン要素の内在寸法の高さが行ボックスの高さとして適用されます。
line-heightプロパティは非置換インライン要素（インライン要素の中で置換インライン要素を除いた要素）、表のセル要素・キャプション要素、インラインブロックボックスを形成する要素（display : inline-block ;）の行ボックスの最小の高さを指定するもので、非置換インライン要素においては行ボックスの高さを算出するために用います。
置換インライン要素は例外で、line-heightプロパティは無効であり、行ボックスの高さは、heightプロパティで与えられた値、または img要素は画像のもともとのサイズが高さとなり、その他の input要素, object要素, select要素, textarea要素は UA が決定する内在寸法が高さとなります。つまり、行内に置換インライン要素を含むと、line-heightプロパティによる最小の高さの値が置換インライン要素の内在寸法の高さよりも小さいと、最小の高さは破棄され、置換インライン要素の内在寸法の高さが行ボックスの高さとなります。
line-heightプロパティの値
line-heightプロパティに指定できる値は、それぞれ以下の意味を示します。
- <長さ>
- "
em", "px" などの単位識別子を伴う数値で指定（負の値は不正） - <パーセンテージ>
- 当該要素のフォントサイズに対するパーセンテージ値（
%）による割合で指定（負の値は不正） - <倍数>
- 当該要素のフォントサイズに対する倍数を実数値（ひとつの小数点を含めてよい10進数値）で指定（負の値は不正）
normal- 標準（1.0から1.2倍に相当）
line-heightプロパティは行間を指定するものではなく、行ボックスの高さ（行の高さ＝行送り）を指定するものであることに注意してください。
行間とは、たとえば p要素の line-heightプロパティの値が "20px"、font-sizeプロパティの値が "16px" の場合は、行の高さである "20px" からフォントサイズの "16px" を引いた "4px" のすき間のことを言います。つまり、行送り（行の高さ）はフォントサイズ+行間を指します。
視覚環境の UA では行の高さの初期設定値は1〜1.2とほとんどもうけられていないため、適度な行の高さをもうけることで、文章が読みやすくなる効果があります。和文を含むテキストの場合は、フォントサイズの 1.4〜1.5倍以上が望ましい行の高さとされます。
line-heightプロパティの実装状況
- IE
- ◯
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯
- iOS
- ◯
- Android
- ◯
仕様上は置換インライン要素に対してline-heightプロパティは無効ですが、FirefoxのGecko以外のレンダリングエンジンでは置換インライン要素にline-heightプロパティの指定が効果を持つ場合があります。仕様上は正しくない振る舞いです。
サンプル
p {
line-height : normal ;
border-top : 1px solid orange ;
border-bottom : 1px solid orange ;
}
p.large { line-height : 2 ; }
p.x-large { line-height : 3.5 ; }