Что такое размер шрифта, почему эти две коробки имеют разную высоту?

Question

Борьба с выравниванием глификон, по-видимому, я не понимаю, как работает размер шрифта. In this fiddle У меня есть два divs, содержащих некоторые символы с одинаковым размером шрифта, но они в конечном итоге имеют разную высоту.

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 игнорирует негабаритный срок и имеет правильную (строка -) высота 60 пикселей, но div.left нет? Более того, высоты span отличаются на 4px, но divs отличаются на 9px ?!

Answer 1

Фактически они имеют одинаковую высоту. Используйте элемент проверки, чтобы увидеть, что происходит. Проблема заключается в контейнере и положении пролета в контейнере. Добавьте блок отображения к myglyphicon, тогда положение диапазона обоих будет одинаковым.

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