空內聯塊元件的垂直對齊

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