Html 空内联块元素的垂直对齐

考虑以下html/css：

<style>
span
{
  display:inline-block;
  width:5em;
  height:5em;
  padding:1em;
}
</style>

a
<span style="background-color:blue;">b</span>
<span style="background-color:green;"></span>
<span style="background-color:red;">c</span>
d

跨度
{
显示：内联块；
宽度：5em；
身高：5公分；
填充：1em；
}
A.
B
C
D

蓝色和红色框以及框内和框周围的文本水平排列。空的绿色框不存在；它显示在其他两个框的上方。如果我在绿色框中添加一些文本，这种行为就会停止，所有内容都会按照我希望的方式排列

这在IE8（标准模式）、FireFox 3.0和Chrome中都会发生，所以我假设有一些我不理解的空内联块元素的属性

---

我可以通过指定垂直对齐属性使框对齐，但是四个文本值不再对齐。有什么想法吗？我在这一点上被难住了。

试着在绿色范围内添加

。

a
a
<span style="background-color:blue;">b</span>
<span style="background-color:green;">&nbsp;</span>
<span style="background-color:red;">c</span>
d

B
C
D

让跨距顶部对齐，然后负边距等于您的填充，您不需要不间断的空格

span
{
    display:inline-block;
    width:5em;
    height:5em;
    padding:1em;
    vertical-align:top;
    margin-top: -1em;
}



a
    <span style="background-color:blue;">b</span>
    <span style="background-color:green;"></span>
    <span style="background-color:red;">c</span>
d

span
{
显示：内联块；
宽度：5em；
身高：5公分；
填充：1em；
垂直对齐：顶部；
边缘顶部：-1米；
}
A.
B
C
D

以防万一，另一种解决方案可以帮助其他人从CSS中获得一些空间：

  span:empty:before {
    content: "\0020";
    display: inline-block;
  }

---

使用代码样式。。。将其放在新行上，缩进4个空格或more@Chris... 你让我想知道为什么会这样-原来默认的垂直对齐是“基线”，所以没有基线就没有对齐的基线是有道理的。