为什么向跨度添加文本会改变其位置？

Question

看到这个fiddle。当我拿出文本时，跨度很好地排列在一起。当我向一个文本添加文本时，它在页面中显示较低。

<div> 
    <span id="first"> 
    </span> 
    <span id="second"> 
     Text 
    </span> 
</div> 

span#first { 
    display:inline-block; 
    width: 100px; 
    height: 100px; 
    background-color: red;  
} 

span#second { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
} 

Answer 1

的vertical-align默认值是baseline。 CSS spec表示对于vertical-align: baseline

将框的基线与父框的基线对齐。如果该框没有基线，请将框的底部与父母的基线对齐。

空块没有基线，所以span的底部与父div的基线对齐。下一个span，因为它具有文本（因此是基线），因此将文本与div的基线对齐。

如果您在span元素上设置了vertical-align: top，它们应该正确排列。

Answer 2

尝试增加浮动：左，像

span#first { 
    display:inline-block;   
    float: left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
span#second { 
    display: inline-block; 
    float: left;  
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
} 

参见：jsFiddle