Html 为什么跨度和img元素在同一直线上具有不同的垂直位置？

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

还有JSFIDLE演示：

---

您需要在

img

或

span

上设置

垂直对齐

，因为

内联

元素默认位于

基线上

：

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

---

您需要在

img

或

span

上设置

垂直对齐

，因为

内联

元素默认位于

基线上

：

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

---

图像的默认

垂直对齐

使其位于文本的基线上。图像的底部与字母的底部对齐（不考虑您可能在字母

y

和

g

上找到的下行字母）

您可以通过以下方式进行更改，例如：

img {
    vertical-align: bottom;
}

---

图像的默认

垂直对齐

使其位于文本的基线上。图像的底部与字母的底部对齐（不考虑您可能在字母

y

和

g

上找到的下行字母）

您可以通过以下方式进行更改，例如：

img {
    vertical-align: bottom;
}