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; }