css样式：div中img的高度多了4px 作者：马育民 • 2023-05-26 18:04 • 阅读：10041 # 提出问题 [](/upload/0/0/1IX5lFbTT6fk.png) 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> ``` ### 分析 [](/upload/0/0/1IX5lGWfhWTI.png) 由于 `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:0` 或 `font-size:0;` 参考： https://blog.csdn.net/u013076574/article/details/79711884 原文出处：http://malaoshi.top/show_1IX5ZKJJKAal.html