为什么这两个跨度不在同一位置垂直对齐？(Why these two spans doesnt align vertically at the same position？)

为什么这两个跨度不在同一位置垂直对齐？(Why these two spans doesnt align vertically at the same position？)

我是一名新秀，今天我尝试制作一个带有img和ap元素的2跨度的div。 那么，下面是相对代码，但是这两个跨度保持在diff垂直位置。我不知道为什么，因为它们都具有相同的CSS，并且包装的宽度足够长。

<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以解决这个问题，肯定会的。

但我不会离开这个问题，我不只是在寻求解决方案，我想知道为什么，为什么这两个跨度并没有停留在同一垂直位置上呢？

谢谢你的时间。

I am a rookie, I tried to make a div with 2 spans today with an img and a p element. Well, here is the relative code below, but the two spans stay at the diff vertical position.I do not know why, as they all have the same css, and the width of the wrapper is long far enough.

<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>

And, the css is

*{ 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; }

At last, I gave the second span a float right css to solve this problem, surely it would.

But I am not leaving the problem, I am not just asking for solutions, I want to know why, Why the two spans did not stay at the same vertical position before?

Thanks for your time.

最满意答案

在图像下有一点空隙，将img声明为块或添加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/ 。

Under image there is a little gap, declare img as block or add vertical-align.

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

OR

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

Above you have two possible solutions how to fix that. Something more why it's needed at https://stackoverflow.com/a/27177987/.