css样式:div中img的高度多了4px

提出问题

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> 标签的 displayp 设置为 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:0font-size:0;

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


原文出处:https://malaoshi.top/show_1IX5ZKJJKAal.html