空内联块元素的垂直对齐

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

尝试添加 绿色跨度的内部。