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

CSS行の高さを指定する場合は、 「line-height」を使用します。

インライン要素に対して「line-height」を指定した場合は、 その要素のボックスの高さを指定することになります。 ブロック要素に対して指定した場合は、 その要素にあるインライン要素の高さの最小値を指定することになります。

line-height 使用例

line-height: normal;
line-height: 15px;
line-height: 1.5;
line-height: 150%;
説明
normal 初期値。ブラウザが高さを自動的に設定します。
実数値+単位 実数値に単位を付ける。例)10px、1.5em
実数値 指定した要素のフォントサイズに対する相対的な数値。 例)フォントサイズが「10px」の場合、「1.5」と指定すると、行の高さは「15px」となります。
パーセンテージ+% 指定した要素のフォントサイズに対する相対的なパーセンテージ。 例)フォントサイズが「10px」の場合、「150%」と指定すると、行の高さは「15px」となります。

行の高さ(line-height) サンプル

line-heightに値を設定して、表示してみます。

line-height: normal; (初期値)

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

line-height: 1em;

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

line-height: 1.5em;

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

line-height: 200%;

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML・CSS入門