html - 内联内容上方和下方的空间

Question

内联内容上方和下方的空间是多少？

在这里可见:
http://jsbin.com/vertical-spacing-weirdness/

您可以看到 div/table 和 span 之间的白色区域；但是跨度没有填充或边距。

有趣的是，当使用过渡文档类型时，这个空间消失了:
http://jsbin.com/vertical-spacing-weirdness/2/

---

需要注意的是，在 Firefox 中，当您使用可被 4 整除的像素字体大小值(4px、16px、20px 等)时，空格会出现在 Transitional 中。

编辑 - 已解决/为什么

好吧，事实证明这里的问题是父项(div 或表)和子项(span)之间的字体大小不同。严格的 doctype 样式更有意义，因为无论如何都需要更改 div 高度以容纳 div 中但不在 span 中的任何文本。因此，在以下两个示例中，div 的高度将相同:

<div>text<span>...</span></div>

<div><span>...</span></div>

使用过渡样式时，div 只需要足够大，在第二个示例中，它的高度仅足以匹配 span 的字体大小，因为没有 divs 字体大小的字符-尺寸。

Firefox 在 font-sizes 为 4 的倍数时出现的故障仍然很奇怪。

(在 23.0.1 上测试，每晚:26.0a1 (2013-08-31))

---

不知道我解释的够不够清楚，请问你是否需要澄清。

Answer 1

在父级上应用字体大小而不是自己跨度，sample > div div {font-size:13px;}