line-heightプロパティの説明
CSSの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プロパティの構文は以下の通りです。
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、同じ内容の要素を並べて行間の寸法を変えた時の比較です。
<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>
.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%;
}
単位つきの値で行間を指定する場合
line-heightの値に単位つきの数値を指定すると、想定したものとは違う挙動を示すことがあります。例えば、親要素のフォントサイズを継承した子要素が、別のフォントサイズを持つ場合に計算に使われるフォントサイズが変わります。