Why these two spans doesnt align vertically at the same position？ - css

Question

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>
<img src="mail.png">
</span>
<span>
<strong>xxxx#gmail.com</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.

Answer 1

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

Answer 2

You have to add vertical-align: middle to img element:
* {
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;
vertical-align: middle;
/*Add vertical align middle*/
}
<div id="bannerwrapper"> <span>
<img src="http://placehold.it/200x100">
</span>
<span>
<strong>xxxx#gmail.com</strong>
</span>
</div>
I strongly suggest to take a look to vertical-align property.