【CSS】line-height属性で1.5と1.5 emの違いを設定

参照MDN line-height:line-height CSSプロパティを使用して、複数行のテキストの間隔など、複数行の要素の空間量を設定します.ブロックレベル要素の場合、要素行ボックス(line boxes)の最小高さを指定します.非代替のinline要素の場合、ラインボックス(line box)の高さを計算するために使用されます.
line-heightプロパティは、次のいずれかに指定されます.
この属性の適用値は、この単位のない数字に要素を乗じたフォントサイズです.計算値は指定した値と同じです.ほとんどの場合、これはline-heightを設定する推奨方法であり、継承時に不確定な結果は生じません.ラインboxの計算に使用する高さを指定します.参照使用可能な単位について説明します.em単位の値は、不確定な結果を生じる可能性があります(次の例を参照).1つは、要素自体のフォントサイズに関係します.計算値は、指定したパーセンテージ値に要素を乗じて計算されたフォントサイズです.パーセンテージ値は不確定な結果をもたらす可能性があります(次の2番目の例を参照).キーワードnormalはユーザ側に依存する.Firefoxを含むデスクトップブラウザでは、要素のfont-familyに応じて約1.2のデフォルト値が使用されます.
ここで、数値を推奨用法として設定し、長さ(emを含む)を設定したり、パーセンテージを設定したりすると、不確定な結果をもたらす可能性があります.
例略

 
```

結果:数値を設定すると、数値の値が継承されます.line-heightの値は、フォントサイズに数字を乗算します.emを設定すると、継承する親要素のフォントサイズにemを乗じた値が乗算されるため、不確定な結果をもたらす可能性があります.
line-heightを使用して垂直水平中央を設定します.

<div class="parent"><div class="child">   </div></div>

<style>
  .parent {
     
    background-color: blue;
    width: 200px;
    text-align: center;
    line-height: 400px;
    font-size: 0px;
  }
  .child {
     
    background-color: burlywood;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    font-size: 16px;
  }
</style>