CSS line-height プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

行の高さをパーセントで設定します：

p.small {
    line-height: 90%;
}

p.big {
    line-height: 200%;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

line-height プロパティは、行の高さを指定します。

注: 負の値は使用できません。

デフォルト値： normal
継承： 継承する
アニメーション可否： 可。animatable を参照 Try it
バージョン： CSS1
JavaScript 構文： object.style.lineHeight="30px" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
line-height 1.0 4.0 1.0 1.0 7.0

CSS 構文

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

プロパティの値

値 説明 Play it
normal 通常の行の高さ。これがデフォルトです Play it ❯
number 行の高さを設定するために、現在のフォントサイズに乗ずる数値 Play it ❯
length px、pt、cm 等による固定した行の高さ Play it ❯
% 現在のフォントサイズの割合による行の高さ Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照
Examples

その他の例

例

ピクセル値を使用して 2 つの段落における行間スペースを指定します。

p.small {
    line-height: 10px;
}

p.big {
    line-height: 30px;
}
Try it Yourself ❯

例

数値を使用して 2 つの段落における行間スペースを指定します。

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}
Try it Yourself ❯

関連ページ

CSS チュートリアル： CSS Text

HTML DOM リファレンス： lineHeight プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯