内联内容上方和下方的空格

Question

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

此处可见：
http://jsbin.com/vertical-spacing-weirdness/

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

有趣的是，当使用过渡doctype时，这个空间会消失：
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的字体大小，因为没有div字体大小的字符。

Firefox在字体大小为4的倍数上出现的故障仍然很奇怪。

（在23.0.1和夜间测试：26.0a1 (2013-08-31)）

---

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

Answer 1

将字体大小应用于父级而不是自身，sample>divdiv｛font-size:13px；｝

Answer 2

更正css文件中的以下css。

span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
    font-size: 13px;
}

对于此urlhttp://jsbin.com/vertical-spacing-weirdness更改以下CSS

table {
    border-spacing: 0;
    display: block;
    font-size: 13px;
}
span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
}