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のサンプルです。

fontサイズはすべて16pxにしています。
1番上は、normalを指定しています。line-heightはブラウザが自動で設定します。
2番目は、20pxを指定しています。
3番目は、2,5を指定しています。line-heightは16pxに2.5を掛けて40pxです。
4番目は、250%を指定しています。line-heightは16pxに2.5を掛けて40pxです。

コード

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

<style>
#p1{
	font-size:16px;
	line-height:normal;
}
#p2{
	font-size:16px;
	line-height:20px;
}
#p3{
	font-size:16px;
	line-height:2.5;
}
#p4{
	font-size:16px;
	line-height:250%;
}
p{border:1px solid #000;width:360px;
text-indent:10px;margin-bottom:10px;background:LightCyan;}
</style>

<p id="p1">normal</p>
<p id="p2">line-heightは、20px</p>
<p id="p3">font-size:16px * 2.5 = line-heightは40px</p>
<p id="p4">font-size:16px * 250% = line-heightは40px</p>