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

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

書き方 line-height : 値
数値
フォントサイズ*数値で行の高さになる。使用推奨。
line-heightの値を1.5とした場合
line-heightの値を2とした場合
数値+%
数値+単位
normal
ブラウザが設定。
備考 font-sizeが16pxでline-heightが1.5の場合、
1行の高さは24px(16*1.5)になります。
font-sizeの上下に4pxずつ追加されます。
初期値 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になります。

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS vertical-align 垂直の位置を指定するサンプル

△上に戻る