为什么span和img元素在同一行中有不同的垂直位置？

Question

尽管span和img元素的高度相同，但它们位于不同的垂直位置，即它们的“y”坐​​标不同。这背后的基本理念是什么？

HTML代码：

<p>
    <span> Foo </span>
    <span> Bar </span>
    <img src="http://www.oriental-weaponry.co.uk/acatalog/68-06-RE-rattan-escrima-stick-1000.jpg" height="36" width="36"/>
</p>

关联的CSS：

span { 
    width:100px;
    background:blue;
    font-size:30px;
    color:white; 
}

和jsfiddle演示：

http://jsfiddle.net/Lcawysvs/2/

Answer 1

图像的默认vertical-align会使其位于文本的基线上。图像的底部与字母的底部对齐（折扣您可能在y和g等字母上找到的下划线。

你可以改变它，例如：

img {
    vertical-align: bottom;
}

Answer 2

您需要在vertical-align或img上设置span，因为inline元素默认位于baseline：

span { 
  display:inline-block;
  vertical-align: top;
  width:100px;
  background:blue;
  font-size:30px;
  color:white; 
  text-align:center;
}

FIDDLE