html - 空行内 block 元素的垂直对齐

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 中一直发生，所以我假设有一些我不理解的空内联 block 元素的属性。

我可以通过指定 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