CSS line-height 行の高さを指定するサンプル

目次	line-heightとは
	line-heightの値を1.5とした場合
	line-heightの値を2とした場合

line-heightとは

line-heightは、行の高さになります。

font-sizeが16pxでline-heightが1.5の場合、
1行の高さは24px(16*1.5)になります。
font-sizeの上下に4pxずつ追加されます。

書き方	line-height : 値
値	数値フォントサイズ*数値で行の高さになる。使用推奨。
	line-heightの値を1.5とした場合
	line-heightの値を2とした場合
	数値+%
	数値+単位
	normal ブラウザが設定。
初期値	normal
継承	継承する
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/line-height

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</1.5>

行の高さは、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</1.5>

行の高さは、font-size(16) * line-height(2) = 32pxになります。