提出问题

css代码：

<style>
    img{
        width: 200px;
        /* display: block; */
    }
    .box{
        border: 1px solid red;
        width: 200px;
    }
</style>

html代码：

<div class="box">
    <img src="img/1f64122ae563ee85.png.avif" alt="">
</div>

分析

由于 img 是行内元素，默认 display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。

解决

将 <img> 标签的 display 设置为 block 即可消除

其实解决方法不止一种：

1. 将 img 定义成 display:block;
2. 给父级设置固定高度，然后 overflow:hidden
3. 给img父元素div设置 font-size:0;
4. 设置 img 的 vertical-align: bottom;
5. 设置 img 的 margin-bottom: -4px;
6. 消除掉匿名盒子的高度，也就是给a设置 line-height:0 或 font-size:0;

参考：
https://blog.csdn.net/u013076574/article/details/79711884

原文出处：/show_1IX5ZKJJKAal.html