为什么 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

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

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

FIDDLE

Answer 2

图像的默认值 vertical-align 使其位于文本的基线上。图像的底部与字母的底部对齐（不包括您可能在 y 和 g 等字母上找到的下行部分）。

您可以更改它，例如：

img {
    vertical-align: bottom;
}

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

Why do a span and an img element have different vertical positions in the same line?

html

css