Html img下方的额外蓝色空间

我有以下代码：

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

کاردستی

结果是：

---

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

这是因为图像本质上被设置为

显示：内联

，因此它们的渲染方式与文本类似。文本具有延伸到字母上方和下方的线条高度，因此，如果有背景色，它将填充该线条高度

---

将图像设置为

display:block

，以使行高无效。

寻求代码帮助的问题必须包含在问题本身中重现图像所需的最短代码，最好是以最短的方式。看看如何创建一个。也发布你的CSS。但是试着移除图像周围的

标签，看看它是否还在那里我曾经有过类似的空白问题，我是通过在

img

标签上放置

display:block

来解决的