line-height

line-height

2025年02月12日 /最終更新:2025年02月12日

行間の高さのサイズ指定するプロパティです。

line-height

プロパティ・値の解説

プロパティ 指定の効果
line-height 行間の高さのサイズ指定。 主にpx指定や%・em・remなど

CodePenで動作チェック

「line-height」の指定を行うことで実際にはどういった影響があるのかを、CodePenのウィンドウを使って動作チェックしてみましょう。
CodePenのウィンドウで以下の作業を行いましょう。

/* line-height: 50px; */
↓「/*」「*/」を削除↓
line-height: 50px;

See the Pen プロパティ:font-size・line-height by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

行間の高さをサイズ指定するプロパティ

line-heightは行間の高さをサイズ指定するプロパティです。
文字サイズの指定であるfont-sizeと合わせて指定することが多いです。
文字の指定に関しては他にも以下のプロパティなどがあります。

プロパティ 指定の効果
font-family 書体の指定
font-weight 太さの指定
font-style 状態(斜体など)の指定
font-size 文字の大きさの指定
color 文字色の指定