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

我正在显示两个DIV面板，代码如下。两个面板之间的唯一区别是第一个DIV元素中的SPAN元素具有 font-size: 14px 应用于它的样式，而第二个DIV元素的样式不具有此样式。在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。为什么会出现这种差异？

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

2052

2018-03-23 14:08

起源

答案:

至于“为什么”它会发生

根据W3C （大胆的重点补充），

'line-height'指定最小线框内的高度元件。最小高度由a组成 最小高度 该基线和a 最小深度低于 它...上面字体的高度和深度并且低于基线 假设是字体中包含的度量标准。

所以这告诉我的是

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

2）你缩小字体似乎正在改变字体应用的最小值 上面和下面 的基线 span 为了 line-height: 38px。显然，较小的字体大小会重新分配更多的间距下面推动小字体的基线 p 标签更高。这似乎证实，如果你添加到 span 一个 vertical-align: top 就像我在这里做的那样，然后基线向上移动较小的字体，并且没有发生尺寸变化 p 标签。

2018-03-23 16:13

没有真正回答'为什么？'...... - Spongman

@Spongman：它在＃2点回答“为什么”，因为“较小的字体大小重新分配了更多的间距下面基线...推动 p 标签更高。“也就是说，基线保持在同一点，但更多地放在下面因此需要 p 扩大以满足额外需要。 - ScottS

答案:

至于“为什么”它会发生

根据W3C （大胆的重点补充），

'line-height'指定最小线框内的高度元件。最小高度由a组成 最小高度 该基线和a 最小深度低于 它...上面字体的高度和深度并且低于基线 假设是字体中包含的度量标准。

所以这告诉我的是

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

2018-03-23 16:13

没有真正回答'为什么？'...... - Spongman

不确定 为什么 它正在影响它，但如果你将行高度属性添加到跨度，就像我在这里...

http://jsfiddle.net/GQhZR/

..解决了这个问题。

因此，在用一些css校正之前，线高度大于父面板的线高度。

css编辑：

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

2018-03-23 14:11

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

答案:

至于“为什么”它会发生

答案:

至于“为什么”它会发生

热门问题

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