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;
}