css「line-height」とは？実は「文字の高さ」（html,css）

line-heightは「文字の高さ」

「line-height」は、
行間のプロパティと言われます。

ですが

「line-height」は、
「文字の高さ」のプロパティです。

それでなぜ行間のプロパティと言われているのでしょうか？

それは、

「line-height」は、
「font-size」より大きく設定することによって行間として機能するからです。

「line-height」どんな時に使う？

「line-height」は、
どのような時に使われるのでしょうか？

１：行間
２：１行を上下の中央に持ってくる（１行の時だけ可能）

これらが考えられます。

指定は３種類

「line-height」の指定方法は「３種類」あります。

　１：normal（ブラウザのデフォルト）
　２：１
　３：px、em、％

それぞれ詳しく説明します。

１：normal（ブラウザのデフォルト）

「line-height」には、
normalという指定方法があります。

このnormalを入れるとどうなるのでしょうか？

normalを入れると「ブラウザのデフォルト数値」になります。

そして

「ブラウザのデフォルト数値」は、
ブラウザによって違います。

なので

特別な状況でない限り「normalは使わないでください」。

line-height: normal;

２：１

「１」は、以下のように指定します。

line-height: 1;

一体何が「１」なのでしょうか？

「１」は、
「font-size」に対しての倍率です。

文字では分かりにくいので例を挙げます。

「line-height」を行間として使うのなら、

line-height: 1.2;

がちょうど良いでしょう。

３：px、em、％

「line-height」は、
px、em、％などの指定もできます。

「line-height」は、
文字の高さとしても使えるので

１行の高さが決まっているのなら使うこともあるでしょう。

line-heightとバックスクリーン

「line-height」を使うときは、
注意点が１つあります。

それは

「display:inline」の時「行間へバックグラウンドが入らない」ということです。

このことは、意外に見落としがちなので注意してください。