目次
| サンプル | line-height |
| line-heightの値を1.5とした場合 | |
| line-heightの値を2とした場合 | |
| 行の高さを継承する |
line-height
line-heightは、行の高さを指定します。
| line-height : 値 |
値は以下を設定します。継承します。
| 数値 | font-size*数値で行の高さ(line-height)になります。 1.5とした場合で、font-sizeが16pxの場合、line-heightは16*1.5の24pxになり(24-16)/2の4pxが上下に余白として付きます。 |
| 数値+% | 150%とした場合で、font-sizeが16pxの場合、line-heightは16*1.5の24pxになり(24-16)/2の4pxが上下に余白として付きます。 |
| 数値+単位 | 単位は、px、em等を指定 24pxとした場合で、font-sizeが16pxの場合、line-heightは24pxになり、(24-16)/2の4pxが上下に余白として付きます。 |
| normal | ブラウザが設定。(デフォルト) |
line-heightの例
font-sizeが16pxでline-heightが1.5の場合、1行の高さは24px(16*1.5)になります。
font-sizeの上下に4pxずつ追加されます。
line-heightの値を1.5とした場合
<style>
.p1 {
font-size: 16px;
line-height: 1.5;
border: 1px solid #000;
width: 200px;
background: LightCyan;
}
</style>
<p class="p1">line-height<br />
line-height</p>行の高さは、font-size(16) * line-height(1.5) = 24pxになります。
line-heightの値を2とした場合
<style>
.p1 {
font-size: 16px;
line-height: 2;
border: 1px solid #000;
width: 200px;
background: LightCyan;
}
</style>
<p class="p1">line-height<br />
line-height</p>行の高さは、font-size(16) * line-height(2) = 32pxになります。
行の高さを継承する
<style>
.div1 {
font-size: 16px;
line-height: 1.5;
}
</style>
<div class="div1">
<p>ABCDE</p>
<p>ABCDE</p>
<p>ABCDE</p>
</div>8～10行目のline-heightは、24px(16px * 1.5)になります。
関連の記事