CSS:为什么减小相邻内联元素的字体大小会增加整体行距？

Question

我有一个包含两个 span 标签的元素，每个标签都包含一些文本。容器元素设置字体大小，然后将第二个 span 标签上的字体大小设置为较小的大小。当第二个跨度的字体大小减小时，行和下一个 block 元素之间的空间会增加。这在 WebKit 和 Gecko 中都会发生。

p 容器元素有 { margin-bottom: 0;填充底部:10px； } 和它的后续兄弟有 { margin-top: -5px; }

下图说明了这种情况，并包含了 FireBug 中文档结构相关部分的快照。

为什么在减小第二个 span 标签的字体大小后，p 标签下方的间距会增加？

Answer 1

我的猜测是你有一个(相对)大的 line-height 被那个小数点跨度(可能是 32px？)继承，当你将字体大小减小到 18px 时，你会遇到小数点的基线字形与非十进制字形匹配，但该行仍必须占据指定的完整行高。因此，在基线下方添加了额外的空间。

添加行高规则，我敢打赌这会消失:

.box .value > .decimal { line-height: 18px; }