親 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>
フォントサイズを変更せずにこのギャップを取り除くにはどうすればよいですか? また、要素の表示タイプを「ブロック」に変更したくありません。
行の高さを変更しようとしましたが、成功しませんでした。
PS ご参考までに、なぜこれが必要なのか: Chrome には、いつでも font-size が 6 ピクセル未満になるのを防ぐ「機能」があります。したがって、すべての値に 10 を掛けて、この問題が発生しました。対応する質問: Chrome で em 単位を使用する際の問題