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

概述看到这个 fiddle.当我拿出文本时,跨度很好地排列在一起.当我向其中添加文本时,它在页面中显示为较低. <div> <span id="first"> </span> <span id="second"> Text </span></div>span#first { display:inline-block; width: 看到这个 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;   }

解决方法 vertical-align的默认值是baseline. CSS spec表示垂直对齐：基线

Align the baseline of the Box with the baseline of the parent Box. If the Box doesn’t have a baseline,align the bottom of the Box with the parent’s baseline.

空块没有基线,因此跨度的底部与父div的基线对齐.下一个跨度,因为它有文本(因此是基线),将文本与div的基线对齐.

如果在两个span元素上设置vertical-align：top,它们应该正确排列.

总结

以上是内存溢出为你收集整理的html – 为什么在跨度中添加文本会改变其位置？全部内容，希望文章能够帮你解决html – 为什么在跨度中添加文本会改变其位置？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。