爲什麼向跨度添加文本會改變其位置？

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