原因:img是一种类似text的标签元素,在结束的时候,会在末尾加上一个空白符(匿名文本),导致下方会多出来 3px 间距。
解决方案:
1.给div设置和img一样的高度;
缺点:该方法不够灵活,一旦img尺寸改变,我们要重新设置div的高度
2:给img设置vertical-align为除baseline以外的值,常用
3:给img添加display:block;(推荐)
这个方法是我们比较常用,但需要注意,img一旦设置为块,text-align:center;就不再生效,图片的水平居中应使用margin:auto;
4:给img设置浮动
设置浮动会让img脱离文档流
缺点:父元素高度不会被img自动撑开
5:给div设置font-size:0;
缺点:该方法会使div中的文字消失
可根据实际情况选择合适的方法。