img下方的额外蓝色空间

Question

我有这段代码：

<div class="item">
    <div class="item-title Traffic">کاردستی</div>
        <div class="item-content">
            <a href=""><img src="images/kardasti.png" width="100%" ></a>
        </div>
    </div>
</div>

结果是：

为什么这个蓝色区域显示在图像下方？

Answer 1

这是因为图片本质上设置为display: inline，所以它们的渲染方式与文本类似。文本的行高在字母的上方和下方延伸，因此如果有背景颜色，则填充该行高。

将图像设置为display: block以使线高无效。