行の高さを指定します。font スタイルシート属性でも同様の定義が行えます。
以下に示すいずれかの形式で指定する。
line-height: normalline-height: <number>line-height: <number><unit>行の高さを通常に設定する例を以下に示す。
<div style="line-height: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>行の高さを 1.2 に設定する例を以下に示す。
<div style="line-height: 1.2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>| 単位 | 意味 | 説明 |
|---|---|---|
| em | 親要素のフォントサイズ | |
| rem | root em | ドキュメントのルート要素のフォントサイズ |
| cm | centimeters | 1cm |
| mm | millimeters | 1mm |
| Q | 級 (quarter-millimeters) | 0.25mm |
| in | inches | 1 inch |
| pc | picas | 1/6 inch |
| pt | points | 1/72 inch |
| px | pixels | 1/96 inch |
| % | percent | パーセント |
| vw | viewport width | ビューポートの幅の1/100 |
| vmin | minimum viewport | ビューポートの幅または高さで小さい方の1/100 |
| vmax | maximum viewport | ビューポートの幅または高さで大きい方の1/100 |
パーセンテージは 1em を基準として指定する。100% で 1em となる。
行の高さを 1.8rem に設定する例を以下に示す。
<div style="line-height: 1.8rem;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>normal
すべての要素に対して line-height プロパティを適用できる。
line-height プロパティは、親要素の計算値を継承する。
JavaScriptからは要素オブジェクトの style.lineHeight プロパティで line-height を参照及び設定できる。
line-height プロパティの値を JavaScript で変更する例を以下に示す。
line-height:
<select id="lineheight">
<option selected>normal</option>
<option>1</option>
<option>1.2</option>
<option>1.4</option>
<option>1.6</option>
<option>1.8</option>
<option>2</option>
</select>
<div id="example">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<script>
const select = document.getElementById("lineheight");
select.addEventListener("change", function() {
document.getElementById("example").style.lineHeight = select.value;
}, false);
</script>上記の HTML は以下のように表示される。
line-height:World Wide Web Consortium (2025) CSS Inline Layout Module Level 3