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的基线对齐。

如果您在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

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

2 个答案: