html - 为什么将文本添加到跨度会改变其位置？

Question

看到这个小提琴。当我取出文本时，跨度很好地排列在一起。当我向其中添加文本时，它会显示在页面的下方。

<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规范说vertical-align: baseline

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

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

如果您同时设置vertical-align: top两个span元素，它们应该正确排列。

Answer 2

尝试添加float: left，例如

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