清除图片下默认的小间隙_小程序image与image之间的空隙怎么解决

最新推荐文章于 2023-11-17 20:08:04 发布

weixin_39718083

最新推荐文章于 2023-11-17 20:08:04 发布

阅读量2k

点赞数

文章标签：清除图片下默认的小间隙

看图

原因：由于行内元素默认vertical-align按照基线(base-line)对齐，而父元素的border-bottom对应着行内元素的底线(bottom)，所以默认情况下图片会与父元素产生底部间隙。

我有个疑惑,图片image 应该是 inline-block 元素,所以我继续查了下,另一个解释是:

image和img默认都是行内块元素，而他的vertical-align的属性默认为baseline,留白就是baseline和bottom之间的距离

收集了以下图片,让我们更好理解:

解决方法:

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

备注: 图文以及链接来源网络如有侵权请联系删除!蟹蟹!!!!

关注