空内联块元件的垂直对齐

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中一直出现，所以我假设有一些我不明白的空行内块元素的属性。

我可以通过指定一个垂直对齐属性来使这些框排列起来，但是这四个文本值不再对齐。有什么想法吗？我被困在这一个。

Answer 1

尝试在绿色的色彩范围内添加 。

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

给出跨度顶部对齐，然后负余量等于您的填充，并且您不需要非破坏性空间破解。

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