line-height:行の高さを指定する

初期値 normal
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション <length>値、<number>値
対応ブラウザ caniuseで確認

line-heightプロパティの説明

line-heightは、テキストが並ぶ行の高さを指定します。具体的にはCSSのボックス・モデルにおける行ボックスの高さを表します。ブロック要素に対しては、その要素に含まれる行ボックスの最小の高さとなり、非置換インライン要素では、行ボックスの高さの計算に使われる値となります。

このプロパティは、主にページ全体の行間を整えるために使用されます。多くの場合、単位なしの番号を用いてline-height: 1.5;のように記述します。

line-heightに指定できる値

normal
ブラウザの既定値を採用します。多くの場合、font-familyに付随する1.2程度の高さとなります。
<number>(推奨)
単位なしの数字で指定します。小数点を含む正の数値が使用可能です。ここで指定される値はフォントサイズの倍数を意味します。例えば、1.5であれば行間はフォントサイズで得られる1の高さの1.5倍の幅となります。
<length>
CSSで使用できる単位つきの長さを表す数値です。フォントサイズを基準とするemなどを使用すると、意図しない場所でレイアウトが崩れることがあります。
<percentage>
要素のフォントサイズに対する割合を表します。指定されたパーセンテージにフォントサイズを掛け合わせたものが計算結果として使われます。文字の大きさが変わるような要素で使用すると、意図しない場所でレイアウトが崩れることがあります。

line-heightの使い方とサンプル

line-heightプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
line-height: normal;

/* <number>値 */
line-height: 1.5;
line-height: 2;

/* <length>値 */
line-height: 16px;
line-height: 1.5em;
line-height: 2rem;

/* <percentage>値 */
line-height: 16%;
line-height: 120%;

/* グローバル値 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: unset;

line-heightの実例

それでは実際にline-heightプロパティの書き方を見ていきましょう。以下の例は、同じ内容の要素を並べて行間の寸法を変えた時の比較です。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	display: grid;
 	grid: repeat(2, auto) / repeat(3, 1fr);
	gap: 1rem;
	resize: horizontal;
}
.samp_box > div {
	padding: .3rem;
	background: #fff;
}
.samp_box h2 {
	margin: 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 0;
	border: 1px solid #fff;
}
#lh_norm {
	line-height: normal;
}
#lh_1 {
	line-height: 1.5;
}
#lh_2 {
	line-height: 2;
}
#lh_1em {
	line-height: 1.5em;
}
#lh_2em {
	line-height: 2em;
}
#lh_90p {
	line-height: 90%;
}
HTML
<section class="samp_box">
	<div id="lh_norm">
		<h2>normal</h2>
		<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
	</div>
	<div id="lh_1">
		<h2>1.5</h2>
		<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
	</div>
	<div id="lh_2">
		<h2>2</h2>
		<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
	</div>
	<div id="lh_1em">
		<h2>1.5em</h2>
		<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
	</div>
	<div id="lh_2em">
		<h2>2em</h2>
		<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
	</div>
	<div id="lh_90p">
		<h2>90%</h2>
		<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
	</div>
</section>

単位つきの値で行間を指定する場合

line-heightの値に単位つきの数値を指定すると、想定したものとは違う挙動を示すことがあります。例えば、親要素のフォントサイズを継承した子要素が、別のフォントサイズを持つ場合に計算に使われるフォントサイズが変わります。

表示確認

line-heightに関連するCSSプロパティ

文字揃え・段落の振る舞い
direction 文字表記の方向(左右)を指定する
hanging-punctuation 句読点、括弧、引用符などの禁則処理を指定する
letter-spacing 文字同士の間隔を指定する
line-break 句読点や記号などの禁則処理を指定する
line-height 行の高さを指定する
tab-size タブ(tab)文字の表示幅を指定する
unicode-bidi Unicodeのアルゴリズムを上書きして文字表記の方向を変更する
white-space 要素内のホワイトスペースの扱い方を指定する
word-break 要素の幅を超過するテキストの自動改行について指定する
word-spacing 単語同士の間隔を指定する
word-wrap インライン要素に対して単語の途中で改行処理を行うかどうかを指定する
writing-mode テキストの書字方向やブロックのフローを指定する
widows ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する