Question

我正在使用下面的代码显示两个DIV面板。两个面板之间的唯一区别是第一个DIV元素中的SPAN元素应用了font-size: 14px样式，而第二个DIV元素的SPAN元素没有这种样式。在Firefox和Chrome上，第一个面板的高度似乎高于第二个面板。以下是演示网址：http://jsfiddle.net/UWX2u/

代码的副本如下：

<!DOCTYPE html>
<html>
<head>
<title>Margin border</title>
<style type="text/css">
body {
    line-height: 38px;
    font-size: 32px;
}

#panel1 {
    background: #00a000;
    float: left;
}

#panel2 {
    background: orange;
    float: left;
}

#panel1 p span {
    font-size: 14px;
}
</style>
</head>
<body>

    <div id="panel1">
        <p>Foo <span>Bar</span></p>
    </div>

    <div id="panel2">
        <p>Foo <span>Bar</span></p>
    </div>

</body>
</html>

使用Firebug，我可以看到第一个DIV中P元素的计算高度是44.1833px，而第二个DIV中P元素的计算高度是38px。为什么会出现这种差异？

如果我从CSS中删除line-height: 38px属性，则两个DIV元素具有相同的高度。这是一个演示此内容的页面：http://jsfiddle.net/FJUDn/

Answer 1

至于“为什么”它会发生

According to W3C（大胆强调补充），

'line-height'指定了最小行内容的高度元件。最小高度包括最小高度 基线和最小深度它...上面字体的高度和深度并且低于基线的假定为字体中包含的指标。

所以这告诉我的是

1）line-height如果需要可以更高（这只是最小值），并且

2）你缩小字体似乎正在改变字体如何应用span line-height: 38px的{{1}}基线上下的最小值。显然，较小的字体大小会重新分配较小字体的基线以下，使p标签更高。这似乎得到了证实，如果您添加到span vertical-align: top as I did here，则基线会向上移动较小的字体，而p标记中不会发生尺寸更改

Answer 2

不确定为什么会影响它，但如果你将line-height属性添加到span中，就像我在这里...

http://jsfiddle.net/GQhZR/

..它解决了这个问题。

因此，在使用某些css进行校正之前，行高度大于父面板的行高。

css编辑：

#panel1 p span {
    font-size: 12px;
    line-height: 12px; 
}

为什么减少段落中SPAN元素的字体大小会增加段落的高度？

2 个答案:

至于“为什么”它会发生