【HTML+CSS兼容性】 li中插入img元素之间存在空隙BUG问题+解决方案 前端零基础必须知道的事情!
个人主页 极客小俊
✍ 作者简介：web开发者、设计师、技术分享博主
希望大家多多支持一下, 我们一起进步！
如果文章对你有帮助的话，欢迎评论 点赞 收藏 加关注
场景问题描述
环境测试: 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;
}
效果
通过上述方法 我们修改之后，就可以基本上解决间隙的问题了!
如图
"点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️
好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..嘿嘿嘿、嘻嘻嘻!
