html - 图像旁边奇怪的跨度对齐

Question

这是我的精简代码:

<style>
div{
    height:100px;
    background-color:black;
}
span{
    font-size:60pt;
    background-color:yellow;
}
img{
    height:100px;
    background-color:yellow;
}
</style>

<div>
    <span>ASDF</span>
    <img src="foo"/>
</div>

( fiddle :http://jsfiddle.net/pM2jE/)

为什么“ASDF”与 DIV 的其余部分未对齐？

我怀疑，不知何故，单词“ASDF”的底部与 DIV 的其余部分对齐，因此整个 SPAN 实际上并不匹配。我不知道如何解决这个问题。

Answer 1

将此 css 添加到您的图像类

vertical-align: top;