html - 为什么这两个 span 在同一位置没有垂直对齐？

Question

我是菜鸟，今天我试着用一个 img 和一个 p 元素制作一个有 2 个 span 的 div。好吧，下面是相关代码，但是两个span在diff垂直位置。我不知道为什么，因为它们都有相同的css，而且wrapper的宽度足够长。

<div id="bannerwrapper">
    <span>
        <a href="mailto:xxxx@gmail.com"><img src="mail.png"></a>
    </span>
    <span>
        <strong><a href="mailto:xxxx@gmail.com">xxxx@gmail.com</a></strong>
    </span>
</div>

而且，CSS 是

*{
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

#bannerwrapper{
    width: 163px;
    height: 21px;
    margin: 10px auto;
}

#bannerwrapper span{
    display: inline-block;
    height: 21px;
}

#bannerwrapper span img{
    width: 30px;
    height: 21px;
}

最后，我给第二个 span 一个 float right css 来解决这个问题，当然可以。

但我不是离开这个问题，我不只是求解决方案，我想知道为什么，为什么两个跨度之前没有保持在同一个垂直位置？

感谢您的宝贵时间。

Answer 1

图片下方有一点空隙，声明img为 block 或添加vertical-align。

#bannerwrapper span img{
    width: 30px;
    height: 21px;
    display: block;
}

或

#bannerwrapper span img{
    width: 30px;
    height: 21px;
    vertical-align: middle;
}

上面您有两种可能的解决方案来解决这个问题。在 https://stackoverflow.com/a/27177987/ 了解更多需要它的原因.