内联空间的上方和下方空间

Question

内联内容上方和下方的空间是什么？

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

你可以在白色中看到div / table和span之间的区域;但跨度没有填充或边距。

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

---

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

编辑 - 解决/为什么

好吧，事实证明这里的问题是父（div或table）和child（span）之间的字体大小不一样。严格的doctype样式更有意义，因为div高度无论如何都需要更改以适应div中的任何文本而不是跨越。因此，在以下两个示例中，div将具有相同的高度：

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

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

使用过渡样式，div只有它必须的大，在第二个例子中它只会高到足以匹配跨度的字体大小，因为没有字符大小的div字体 - 大小

Firefox的字体大小为4的故障仍然很奇怪。

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

---

我不知道我是否有足够的解释，请询问您是否需要澄清。

Answer 1

在父级上应用font-size而不是span it self，sample＆gt; div div {font-size：13px;}

Answer 2

更正css文件中的css。

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

对于此网址http://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;
}