提出问题
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
即可消除
其实解决方法不止一种:
- 将 img 定义成
display:block;
- 给父级设置固定高度,然后
overflow:hidden
- 给img父元素div设置
font-size:0;
- 设置 img 的
vertical-align: bottom;
- 设置 img 的
margin-bottom: -4px;
- 消除掉匿名盒子的高度,也就是给a设置
line-height:0
或font-size:0;
参考:
https://blog.csdn.net/u013076574/article/details/79711884