CSS line-height 属性

定義と使用方法

line-height 属性は行間の距離（行高）を設定します。

注釈：負の値を使用することは許可されていません。

説明

この属性は行ボックスのレイアウトに影響を与えます。ブロック要素に適用される場合、これはその要素内のベースライン間の最小距離を定義しますが、最大距離ではありません。

line-height と font-size の計算値の差（CSSでは「行間」と呼ばれます）は二分され、それぞれテキスト行の内容の上部と下部に加わります。これらの内容を含む最小のボックスが行ボックスです。

元の数字値はスケーリングファクターを指定し、子要素は計算値ではなくこのスケーリングファクターを継承します。

参照もしくは：

CSS チュートリアル：CSS 文本

HTML DOM リファレンスマニュアル：lineHeight 属性

例

パーセンテージで行高を設定：

p.small {line-height:90%}
p.big {line-height:200%}

自分で試してみる

（ページの下部でさらに多くの例を確認できます）

CSS 语法

line-height: normal|number|length|initial|inherit;

属性値

値 説明
normal デフォルト。適切な行間を設定。
number 数字を設定し、この数字は現在のフォントサイズと乗算して行間を設定します。
length 固定の行間を設定。
% 現在のフォントサイズに基づくパーセンテージ行間。
inherit 親要素から line-height 属性の値を継承するべきことを指定します。

技術的詳細

デフォルト値： normal
継承性： はい
バージョン： CSS1
JavaScript 语法： object.style.lineHeight="2"

TIY 実例

パーセンテージを使用して行間を設定
この例では、パーセンテージ値を使用して段落の行間を設定する方法を示します。
ピクセル値を使用して行間を設定
この例では、ピクセル値を使用して段落の行間を設定する方法を示します。
数値を使用して行間を設定
この例では、数値を使用して段落の行間を設定する方法を示します。

ブラウザのサポート

このテーブルの数字には、この属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0