这是我的疑问。我有一个父 div 和一个孩子，这是一个跨度。两者都将 line-height 设置为 0。span 将 font-size 设置为许多像素 (198px)。
问题：div 有一个高度。但是，如果它应该来自 spans line-height，也就是 0，那么是从什么开始的呢？
我设置了一个 tinkerbin。有兴趣的可以去看看。
这至少发生在 firefox 和 chrome 中，所以这几乎肯定是一种标准化的行为。
注意！ 这是一个css行为疑问。我有兴趣了解正在发生的事情，而不是“解决”“问题”。
提前致谢。
【问题讨论】：
标签： css
文本仍然有大小；字母“F”正在扩展div 以适应。
更新规范：
在内容由行内元素组成的块容器元素上，'line-height'指定行的最小高度元素内的框。
http://www.w3.org/TR/CSS21/visudet.html#line-height
所以盒子的高度实际上来自字体大小，因为行高仅定义为 最小值 0，但不是明确的 0。
【讨论】：
span 的高度为 8px（自动）。
vertical-align 将因子归零来更改结果高度。也就是说，它明确指出，在其他渲染计算中仍有 UA 解释的空间，以摆脱整个外观......
是的，它正在获取其内部元素的高度。如果您希望它正确地采用其定义的高度/行高，则必须将其设置为块元素（ display:block;）
另外，当使用 line height / height :0 在 IE 上隐藏元素时，IE 不会折叠元素，除非 font-size 也设置为 0。
【讨论】：
我想出的答案：
规范支持的第一个事实：
当你的行高大于字体大小时——你通常看到的——这很容易。取行高，减去字体大小，除以 2。将结果应用到“字形框”的顶部和底部，就是这样。因此，如果您的字体大小为 14px，行高为 16px：
16px - 14px = 2px 2px / 2 = 1px
在“字形框”上方添加 1px，在其下方添加 1px。该框的高度为 16 像素，并且正如预期的那样成为父容器的高度（假设在这种情况下，其中只有一个行框）。
当 line-height 小于 font-size（我们的例子）时，事情变得更加棘手。让我们对 54px 的字体大小和 0 的行高使用相同的公式。
0-154px = -154px（规范允许此处为负值，所以我们没问题）
-154px / 2 = -77px
所以，我们的字体大小为 154 像素...还有一些您需要了解的内容。字体既有从基线到顶部的距离，也有从基线到底部的距离。很简单。规范称第一个高度（A）和第二个深度（D）。所以 A+D = 从上到下的距离。
现在这是我在问题中提出的案例中我认为正在发生的事情。这是我从“我的摆弄”而不是从规范中得出的结论（因为我在那里找不到它）。
让我们继续我们的公式。
我们将 line-height 和 font-size 的差值相除得到 -77px。
我们的字体大小是 154 像素。
现在我们必须在顶部添加 -77px，在底部添加 -77px。添加负数就是减去 - 所以我们实际上减去了 77px。
这用一张图更容易解释。
所以是的，这就是我相信高度的来源。至少和它有关。
【讨论】：