inline-block元素的空白间距解决

本文主要是介绍inline-block元素的空白间距解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

现象：使用inline-block来代替float进行布局，会发现留下了一个问题。就是使用inline-block的元素之间会均在空白间距。如图：
这里写图片描述
出现的浏览器：
IE8-9、Firefox、Safari、chrome，但是间距大小是由父元素字体大小决定的
原因：平时写代码，为了使代码看上去“层级分明”，通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是空白符

解决方案：
可以从html标签结构下手，删除换行符，但是比较适合于静态页面
比较好的解决办法：
例：

<ul class="removeTextNodes" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

方案一：
设置父元素的字体为0，但不兼容safari，要兼容则应如下

.ul {
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;
}
.ul li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
zoom:1;
}

方案二：Jquery解决

$('.removeTextNodes').contents().filter(function() {
return this.nodeType === 3;
}).remove();

参考：
http://www.jb51.net/css/68785.html
https://blog.csdn.net/u011144211/article/details/46786897
img默认也为内联元素，所以也会出现空隙问题，解决方案参考：https://blog.csdn.net/mr_lp/article/details/51863782

这篇关于inline-block元素的空白间距解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！