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

CSSの行の高さを指定するサンプルです。
line-heightプロパティを使用します。

line-height プロパティ

line-height : 値
説明
normal ブラウザが設定します。(初期値)
数値 + 単位 指定した単位で設定します。 
数値 この数値 ☓ フォントサイズ=行の高さ
数値 + % この数値+% ☓ フォントサイズ=行の高さ
値を継承する
  • 行の高さを指定します。
  • font-sizeが16pxでline-heightが20pxとした場合、以下の図のようにfont-sizeが16pxで、上下に2pxずつ設定されます。
  • 以下はMDNのline-heightプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/line-height

コード

line-heightのサンプルのコードです。
4行目は、normalを指定しています。line-heightはブラウザが自動で設定します。
8行目は、数値+単位を指定しています。line-heightは20pxになります。
12行目は、数値を指定しています。line-heightは16pxに1.5を掛けて24pxになります。
16行目は、数値+%を指定しています。line-heightは16pxに1.5を掛けて24pxになります。

<style>
#box1{
	font-size:16px;
	line-height:normal;
}
#box2{
	font-size:16px;
	line-height:20px;
}
#box3{
	font-size:16px;
	line-height:1.5;
}
#box4{
	font-size:16px;
	line-height:150%;
}
#d1 div{border:1px solid #000;margin-bottom:10px;text-indent:5px;}
</style>
<body >
<div id="d1">
<div id="box1">normal</div>
<div id="box2">line-heightは、20px</div>
<div id="box3">font-size:16px * 1.5 = line-heightは24px</div>
<div id="box4">font-size:16px * 150% = line-heightは24px</div>
</div>
</body>

サンプル

上記コードのサンプルです。

normal
line-heightは、20px
font-size:16px * 1.5 = line-heightは24px
font-size:16px * 150% = line-heightは24px

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)




△上に戻る