line−heightとは。。。

行送りのことです。。。

「line−heightとは」で検索するとほとんどが…。
『line-heightとは、行の高さを指定するためのプロパティです。初期値はnormalであり、ブラウザが自動的に適切な高さを設定します。値には実数値、もしくは実数値に単位をつけて指定します。単位をつけない場合には、フォントの大きさにその数値をかけたものが行の高さになります。』
などと説明されていました。


では『line−height』って??
2行以上の文章(<p>〜</p>)に対して指定をします。
CSS側で
{ line-height : 1.5em ; } または { line-height : 150% ; }
と記述するとこのような割合で表示されます。


  • 行間とは、文書中の行と行の間隔。
    行の最下部から次の行の最上部までの距離。
  • 行送りとは、文書内での行と行の間隔を表すときに用いられる値。
    行の最下部から次の行の最下部まで、
    つまり文字の高さに行間を足したものが行送りになる。
  • 行間(行の高さ)……0.5em 
  • 文字幅…………………1em

 
「1.5em(150%)」の内訳は
「1em(100%)」は文字幅の基準の値「1」の値です。
残りの「0.5em(50%)」が行間(行の高さ)の値となります。

もし「行間(行の高さ)」と考えると
文字幅「1em」+行間「1.5em」になってしまい、
文字幅以上に行間を空けることになってしまいます。

「line−height」はどの部分を指すかと言うと、
行の文字幅の中央ラインから
次の行の文字幅の中央ラインまでの高さ指定する事となり、
「行送り」と同様に文字の高さに行間を足したものが
「line−height」になるので、
「行送り」として考えましょう