html - img下方的多余蓝色空间

This question already has answers here:

Image inside div has extra space below the image
                                
                                    （9个答案）
                                
                        
                                3年前关闭。
            
                    
我有以下代码：

<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: inline，因此它们的呈现方式类似于文本。文本的行高在字母的上方和下方延伸，因此，如果有背景色，它将填充该行高。

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

关于html - img下方的多余蓝色空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38922368/