CSS - line-height

• トップ
• CSSリファレンス
• line-height

概要

説明

行の高さを指定します。

使用例

.sample-normal {
 line-height: normal;
 width: 400px;
 padding: 5px;
 border: 1px solid gray;
 margin-bottom: 1em;
}
.sample-200 {
 line-height: 200%;
 width: 400px;
 padding: 5px;
 border: 1px solid gray;
 margin-bottom: 1em;
}

<h3>normal</h3>
<div class="sample-normal">
この文章は、行の高さに normal を指定しています。
この文章は、行の高さに normal を指定しています。
この文章は、行の高さに normal を指定しています。
</div>
<h3>200%</h3>
<div class="sample-200">
この文章は、行の高さに 200% を指定しています。
この文章は、行の高さに 200% を指定しています。
この文章は、行の高さに 200% を指定しています。
</div>

詳細

line-height には単位無しの数値を指定する(推奨)

line-height には 1.5 など単位無しの数値を指定することが推奨されています。単位付きやパーセントの場合、フォントサイズの小さな子要素にも親要素の line-height が継承されてしまい、行間が広くなりすぎるのを防ぎます。

.my-parent {
 font-size: 20px;
 border: 1px solid #ccc;
 padding: .2em;
 line-height: 1.5; /* 1.5, 1.5em, 150% */
}
.my-child {
 width: 80%;
 font-size: 10px;
 border: 1px solid #ccc;
}