什么情况下li标签会产生空白文本节点
li标签为块级元素，当其转化为inline-block元素是会出现空白文本节点，在一些浏览器中无法察觉，如Chrome、Edge等，但在Firefox浏览器中可以看到元素节点。展示如下：引起空白间隔的原因
浏览器的默认行为是把inline元素间的空白字符，如空格、换行等渲染成一个空格，li标签在换行后产生新的字符，产生一个空格，占用一个字符的宽度。（== 在非HTML标签和BODY两个标签<这两个会自动删除空白>上都会遇到这个问题，他会把换行符和空格作为文本节点 ==）四种解决方案
方法一：将li标签全部写在一排
举例：****使用JS动态生成**元素节点时产生的li间无空白元素节点就是这个原因，JS生成的元素节点本身写在一排，但在浏览器中展开元素均经过了格式化无法察觉。缺点：可读性差、难以维护、逼死强迫症和洁癖方法二：使用浮动
原理：使用浮动会把li紧紧的靠在一起也就清除li之间的空隙缺点：容易导致高度塌陷、影响其他元素布局、轮播焦点图没法用方法三：将父元素font-size属性设置为0
原理：空白元素节点的字体设置为0 ，自然不占宽度也就不会产生白边了缺点：不是所有浏览器都能成功的，如Safari浏览器仍会产生空白缝隙方法四：设置父元素的letter-spacing属性
原理：letter-spacing控制增加或减少字符间的空白（字符间距），将其设置为较大的负值（看字体大小）可以有效的清除空白缝隙优点：IE9+浏览器均兼容效果展示
如果觉得《清除li标签之间空白间隙》对你有帮助，请点赞、收藏，并留下你的观点哦！
