2

我遇到了一个父 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 有一个“功能”，可以防止字体大小在任何时候小于 6 像素。所以我将所有值乘以十并得到了这个问题。对应问题：Chrome中使用em单位的问题

4

3 回答 3

1

我假设 div 上的字体大小导致相应的行高；因此“差距”。

因此，将 line-height 设置为您计划在 span 中使用的实际 font-size 将与已经提到的垂直对齐一起删除它：

<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>
于 2014-01-22T11:30:16.483 回答
1

尝试添加vertical-align:top，否则子元素将与基线对齐。

于 2014-01-20T14:02:56.787 回答
0

这增加了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>
于 2014-01-20T14:13:33.730 回答