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

i rookie, tried make div 2 spans today img , p element. well, here relative code below, 2 spans stay @ diff vertical position.i not know why, have same css, , width of wrapper 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, 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, gave second span float right css solve problem, surely would.

but not leaving problem, not asking solutions, want know why, why 2 spans did not stay @ same vertical position before?

thanks time.

under image there little gap, declare img 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 have 2 possible solutions how fix that. more why it's needed @ https://stackoverflow.com/a/27177987/.