为什么当我将其放入内联时，我的图像会被按下？

Question

这是我的代码：

    <div>
        <img src="../Resources/css/img/IOlogo.png" style="height:16px;">
        <span style="vertical-align:top;"> Unlimited Access</span>
    </div>

图像显示比文本低约5个像素。它略低于div的底部边界。

Answer 1

你只给了vertical-algin:top这个范围。垂直对齐的deafult值是baseline.so图像将对齐基线。尝试vertical-algin：top为图像和跨度。

img,span{
  vertical-align:top;
}

<div>
    <img src="../Resources/css/img/IOlogo.png" style="height:16px;">
    <span> Unlimited Access</span>
</div>