CSS line-height 行の高さを指定する

01. line-height

・line-heightとは

・line-heightの図解

02. 使用例

・line-heightの値を1.5とした場合

・line-heightの値を2とした場合

・行の高さを継承する

line-heightとは

line-heightは、行の高さを指定します。

line-height : 値

値は以下を設定します。継承します。

数値	font-size数値で行の高さ(line-height)になります。 1.5とした場合で、font-sizeが16pxの場合、line-heightは161.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>
    <div class="div2">
        <p>ABCDE</p>
        <p>ABCDE</p>
    </div>
</div>

8,10,11行目のline-heightは、24px(16px * 1.5)になります。