![98a2567bbb0f2ce8586db32cd0df038c.png](https://i-blog.csdnimg.cn/blog_migrate/ab0a784c0f190b74c5fe1463dcaa551f.jpeg)
原因:由于行内元素默认vertical-align按照基线(base-line)对齐,而父元素的border-bottom对应着行内元素的底线(bottom),所以默认情况下图片会与父元素产生底部间隙。
我有个疑惑,图片image 应该是 inline-block 元素,所以我继续查了下,另一个解释是:
image和img默认都是行内块元素,而他的vertical-align的属性默认为baseline,留白就是baseline和bottom之间的距离
收集了以下图片,让我们更好理解:
![04e927ebc8b3d554936b70f3d88c9794.png](https://i-blog.csdnimg.cn/blog_migrate/c2d4b8f17d2bccf1c5f4bea8429734db.jpeg)
![c44fb9117d951b8b99e328c0dc77f8a1.png](https://i-blog.csdnimg.cn/blog_migrate/962e224824781790dba6868a918de039.png)
解决方法:
1.设置image为块级元素
.img{
display:block;
}
2.改变图片的一个垂直对齐方式
.img{
vertical-align:top;
}
这里普及一下vertical-align的值
baseline:基线对齐;
sub:下标;
super:上标;
top:顶端对齐;
text-top:与文本的顶端对齐;
middle:中部对齐;
bottom:底端对齐;
text-bottom:文本的底端对齐;
百分比和长度:CSS2,可为负数。
3.置父元素文字大小为0,注意,父元素内有文字,不建议用该方法
.img_box{
font-size:0
}
4.image设置浮动
.img{
float:left;
}
还有其它方法,但是感觉以上几种比较好,剩下的就不总结了,以下是原文链接:
1.https://blog.csdn.net/stephenli300203/article/details/104959933
2.https://www.jianshu.com/p/dc590c9b2695
3.http://www.mamicode.com/info-detail-3052260.html
备注: 图文以及链接来源网络 如有侵权 请联系删除!蟹蟹!!!!