font-sizeとは何ですか、なぜこれらの2つのボックスは異なる高さですか？

Question

グリフィコンのアライメントで苦労しているようですが、明らかにフォントサイジングの仕組みが分かりません。 In this fiddle同じフォントサイズでいくつかのシンボルを含む2つのdivがありますが、それらは異なる高さになります。

body { 
 
    line-height: 1; 
 
    font-family: Helvetica; 
 
    font-size: 60px; 
 
} 
 
.wrapper { 
 
    background: lightblue; 
 
    width: 300px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.left { 
 
    width: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    background: darkred; 
 
} 
 
.right { 
 
    width: 50%; 
 
    position: absolute; 
 
    right: 0; 
 
    background: darkgreen; 
 
} 
 
.text::before { 
 
    content: "60px"; 
 
} 
 
.myglyphicon { 
 
    font-family: 'Glyphicons Halflings'; 
 
} 
 
.myglyphicon::before { 
 
    content: "\e046"; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="left"> 
 
    <span class="myglyphicon"></span> 
 
    </div> 
 
    <div class="right"> 
 
    <span class="text"></span> 
 
    </div> 
 
</div>

は、別のフォントタイプが同じフォント・サイズのために、異なる高さを生成することができますが、div.rightは特大のスパンを無視し、正しい（ラインを持っている理由は、私はまだ理解していないようです - ）高さは60pxですが、div.leftはありませんか？さらに、スパンの高さは4pxで異なりますが、divは9pxで異なります。

Answer 1

実際には同じ高さです。 inspect要素を使用して、何が起きているかを確認します。問題はコンテナとコンテナ内のスパンの位置です。 myglyphiconに表示ブロックを追加すると、両方のスパンの位置が同じになります。

.myglyphicon::before { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e046"; 
    display: block; 
}