空的行内块元素的垂直对齐

Question

考虑以下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

蓝色和红色框，以及框内和框周围的文本均水平排列。空的绿色框不会；它出现在其他两个框的上方。如果我向绿色框中添加一些文本，此行为将停止，并且所有内容都将按我希望的方式排列。

[这在IE8（标准模式），FireFox 3.0和Chrome中一直发生，所以我假设存在一些我不理解的空行内块元素的属性。

我可以通过指定vertical-align属性使框对齐，但是四个文本值不再对齐。有什么想法吗？我为此感到困惑。

Answer 1

给跨度顶部对齐，然后负空白等于您的填充，并且您不需要无间断的空格。

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

Answer 2

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

Answer 3

尝试在绿色范围内添加 。

Answer 4

以防万一仍然可以帮助某人，另一个解决方案，要求在CSS中留出一些空间：]

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