他の "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 |
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 を参照 |
ピクセル値を使用して 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 プロパティ