前端图片间隙BUG！99%新手踩坑，一招解决零基础必看！

场景问题描述

环境测试: Chrome、Edge、Opera、FireFox

举个栗子

当你在li元素中直接放入图片img元素之后, 默认就会出现一个bug, 也就是图片显示相互之间存在间隙,

即便是你把所有元素的内外边距都清除之后，还是存在这个问题!

代码案例

html

<ul>
    <li><img src="img/test.jpeg" width="100"/></li>
    <li><img src="img/test.jpeg" width="100"/></li>
    <li><img src="img/test.jpeg" width="100"/></li>
</ul>

css

* {
    margin: 0px;
    padding: 0px;
}
ul > li {
    border: 1px solid red;
}

如图

问题分析

首先，其实我们要明白一点，其实这里不一定就是li元素的问题, 很多人以为是li元素导致的,所以就拼了老命去设置li元素, 当然这样的确也是可以解决问题的，但是没有找准重点!

你不信？ 那么你把li元素 ul元素都去掉,再去看看效果

如图

所以从上图看,虽然说li元素也有默认的行间距，即便是你去掉了li这些元素的内外边距，间隙依旧是存在的!

那么这是为什么呢?

解释

这主要是由于img图片默认的垂直对齐方式和行间距的影响

默认情况下，图片的vertical-align属性值为baseline 简单的说也就是因为这个属性产生的间隙

那么问题来了,那么我怎么去验证一下img图片的vertical-align属性默认值就为baseline呢？

**提示: **

关于baseline(基线)是什么意思，还有包括顶线、中线、基线、底线、x-height、ex、内联盒模型、行距这些概念我这里就不过多赘述了，之前我也发布过对这些详细研究之后的总结文章,有兴趣的朋友可以去看看,相当精彩!

搜索标题如下:

【我确信你还没有完全搞明白它的含义,熬夜整理了一万多字的line-height详细总结,还看不懂那我真的要跪了!】

回到正题, 如果你实在是不信，也可以反向的去测试一下，

比如说你就给img元素 直接加上一个vertical-align:baseline 看看效果 是不是一样的

img{
    vertical-align: baseline;
}

相信你看到的结果还是有间隙的,对吧

所以对于大多数浏览器来说，vertical-align:baseline 就是 img 元素的默认垂直对齐方式

总之就因为图片的vertical-align属性值为baseline,导致图片在li元素中与文本的基线对齐，从而引起空隙!

解决方案

方法1

我们可以直接通过自己的需求设置img元素的vertical-align属性为top、middle、bottom

这样让图片在li元素中顶部对齐或居中对齐，从而消除空隙

img{
    vertical-align: middle;
}

方法2

设置img元素父级容器font-size:0 也可以解决间隙问题, 比如我这里的父级容器就是li元素

ul > li {
    border: 1px solid red;
    font-size: 0;
}

通过调整li元素的font-size属性为0，可以去除li元素的默认行间距

那么这是为什么呢？

原因如下:

我们将li元素的font-size属性设置为0的目的是为了去除li元素默认的行间距。

在默认情况下，li元素会有一个默认的行高，即使没有文本内容也会存在一定的空隙,

注意:有些人说设置ul元素的line-height:0这种方式我不太推荐!

通过将font-size属性设置为0，可以让li元素的文本大小为0，从而使行高为0，进而消除了li元素的默认行间距,这样，即使li元素中没有文本内容，也能够达到去除空隙的效果。

但是设置font-size属性为0会影响li元素自身的文本, 可能子元素中的文字大小也会被影响。

所以如果需要保留li元素内部的文字或其他内容的显示,可以通过给子元素重新设置合适的font-size属性来解决这个问题!

代码如下

* {
    margin: 0px;
    padding: 0px;
}

ul > li {
    border: 1px solid red;
    font-size: 0;
}

ul > li>span{
    font-size: 12px;
}

img{
    vertical-align: bottom;
}

方法3

你也可以给img元素设置为块级元素 或者 浮动元素，也是可以解决间隙问题, 使图片与文本紧密排列，从而解决空隙问题，然后根据具体需求继续调整图片的位置即可!

img{
    display:block;
}

效果

通过上述方法 我们修改之后，就可以基本上解决间隙的问题了!

如图