要素に直接ではなく親にfont-sizeを設定すると、垂直方向の配置にどのように影響しますか？

Question

私は、縦方向の整列がどのように機能するのかを理解するために単純なマークアップを設定しましたが、整列にフォントサイズがどのように影響するのか私は混乱しました。最初の例でhttps://jsfiddle.net/tmk2hqon/

span { font-size: 75px; } 

赤色ブロックに見える：https://jsfiddle.net/wL5zjLnf/1/

section { font-size: 75px; } 

同実施のスパンに直接設定されたフォントサイズを有する：親要素に設定されたフォントサイズで

例2番目の例では、赤いブロックの中央がベースラインに揃えられているように見える一方で、その中間をテキストの最後のラインの中間に揃えます。

• テキスト（75px）
• 白：あるかのように

  それは要素台無しテキストとブロックの間に位置合わせの間にいくつかの空白のように私には思われる、3つの要素があります空白

の中央にその中央を整列テキスト

赤色ブロックとベースラインとベースラインを整列-space（最初の例では、通常のフォントは第二の例では大きさ75px）でありますこの期待された動作、または私はそれがどのように動作するのを誤解しましたか？私は、両方の例が同じ結果を与えると仮定し、その結果は、赤いブロックの中間がテキストの最後の行の一番下に位置合わせされることになります。

Answer 1

親のfont-sizeを設定すると、その行の高さも暗黙的に設定されるため、divは中間になります。

スパンのfont-sizeを設定すると、親の線の高さは変化しません。そのため、divは親線の高さの中間にある間にベースラインレベルに（明らかに）なります。