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

Question

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

我正在显示两个DIV面板,其代码如下.两个面板之间的唯一区别是第一个DIV元素中的SPAN元素具有font-size: 14px应用于它的样式,而第二个DIV元素中的SPAN元素没有此样式.在Firefox和Chrome上,第一个面板的高度似乎高于第二个面板.这是一个演示URL: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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Sco*_*ttS 11

至于"为什么"它会发生

根据W3C(大胆的重点补充),

'line-height'指定元素中线框的最小高度.最小高度包括基线以上的最小高度和低于基线的最小深度 ...基线上方和下方的字体的高度和深度被假定为字体中包含的度量.

所以这告诉我的是

1)line-height如果需要可以更高(它只是最小值),并且

2)你的字体的收缩似乎被移位字体如何应用最小的上方和下方的基线span为line-height: 38px.显然,较小的字体大小更重新分布间距以下的较小的字体的基线,推p标签高.这似乎得到了证实,如果你像我在这里那样添加spana ,那么基线会向上移动以获得较小的字体,并且标签中不会发生尺寸变化.vertical-align: top p

归档时间：	14 年前
查看次数：	5078 次
最近记录：	14 年前