Как избавиться от пространства над пролетом, если размер шрифта родителя огромен?

Question

У меня ситуация, когда родительский DOM-элемент имеет довольно большое значение em. Проблема заключается в том, что все встроенные дочерние элементы получают огромный запас над ними, даже если их размер шрифта гораздо меньше:

Источник (http://jsfiddle.net/rapik/w87m7/2/):

<div style="font-size: 100px; border: 1px solid red;"> 
    <span style="font-size: 0.1em;">How to get rid of the space above without changing the font-size or display properties?</span> 
</div> 

Как я могу избавиться от от этого пробела без изменения размера шрифта? Я также не хочу менять тип отображения элемента на «block».

Я попытался изменить высоту линии, но не удалось.

P. S. В случае, если вам интересно, зачем мне это нужно: Chrome имеет «функцию», которая предотвращает размер шрифта меньше 6 пикселей в любое время. Поэтому я умножил все значения на десять и получил эту проблему. Соответствующий вопрос: Problems using em units in Chrome

Answer 1

Я предполагаю, что размер шрифта на div ведет к соответствующей строке-высоте; следовательно, «разрыв».

Так устанавливая высоту строки для фактического размера шрифта, который вы собираетесь использовать в пролете удалит его в сочетании с уже упомянутой вертикальной выравнивать:

<div style="font-size: 100px; border: 1px solid red; line-height: 0.1em;"> 
<span style="font-size: 0.1em;vertical-align:top">How to get rid of the space above  without changing the font-size or display properties?</span> 
</div> 

Answer 2

Попробуйте добавить vertical-align:top, в противном случае дочерние элементы будут выровнены по отношению к базовой линии.

Answer 3

Это добавлено height и vertical align должно позаботиться об этом за вас.

<div style="height: 25px;font-size: 100px; border: 1px solid red;"> 
<span style="font-size: 0.1em;vertical-align:top;">How to get rid of the space above without changing the font-size or display properties?</span> 
</div>