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

Question

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

所述p容器元件具有{ margin-bottom: 0; padding-bottom: 10px; }和其下面的兄弟具有{ margin-top: -5px; }

下图说明了该情况,并包含FireBug中文档结构的相关部分的快照.

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

Answer 1

我的猜测是，您有一个（相对）较大的行高被该十进制跨度继承（可能是 32px？），当您将字体大小减小到 18px 时，您会遇到十进制字形的基线匹配的情况使用非十进制字形，但该行仍必须占据完整指定的行高。因此，在基线下方添加了额外的空间。

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

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