li、img等元素设置inline-block后的空白间距问题

关于使用 inline-block 来代替 float 的讨论也挺多的，最常见的就是使用 inline-block 来代替 float 进行布局。

不过有一个问题，就是使用 inline-block 的元素之间会存在 4-5px 的空白间隙。今天就记录一下解决这个 4-5px 的方法。

首先写一个 demo ：

HTML：

<ul>
	<li>首页</li>
	<li>产品介绍</li>
	<li>联系我们</li>
	<li>关于我们</li>
</ul>

CSS：

*{
	margin: 0;
	padding: 0;
}
ul{
	display: inline-block;
	list-style: none;
	background: #999;
	text-align: center;
	margin: 10px auto;
}
li{
	display: inline-block;
	background: #555;
	padding: 5px 10px;
	color: #FFF;
}

效果如图：

从上面的 demo 可以看出，在 inline-block 的元素之间存在一个空白间隙。

下面说一下解决这一间隙的几种方法：

方法一：简单一点的方法就是就是改变HTML的结构，下面任何一种方法都可以达到效果。

结构1：

<ul>
	<li>
	首页</li><li>
	产品介绍</li><li>
	联系我们</li><li>
	关于我们</li>
</ul>

这种方法接近标签换行格式的写法，也比较容易阅读。

结构2：

<ul>
	<li>首页</li
	><li>产品介绍</li
	><li>联系我们</li
	><li>关于我们</li>
</ul>

结构2和结构1几乎一样，结束标签的  >  成了另一行的起始标签。

结构3：

<ul>
	<li>首页</li><!--
	--><li>产品介绍</li><!--
	--><li>联系我们</li><!--
	--><li>关于我们</li>
</ul>

结构3的方法采用的是 html 注释的方法，这种方法可能不太常见，不过同样能解决我们的问题。

结构4：

<ul><li>首页</li><li>产品介绍</li><li>联系我们</li><li>关于我们</li></ul>

结构4，应该是比较常用的方法。

结构5：

<ul>
   <li>首页
   <li>产品介绍
   <li>联系我们
   <li>关于我们
</ul>

就是让 inline-block 元素丢失关闭标签。

方法一最终效果如图：

不过方法一是通过标签来解决，虽然问题解决了，但不能称作是技巧。而且上面的方法只适合于写静态页面，如果标签是后台生成，就不合适了。

方法二：负的 margin 

li {
   margin-right: -4px;
}

这种解决方法并不完美，因为不同浏览器解析不同，加上父元素的字体大小不固定，这个“-4px”就不能解决问题。

方法三： 设置父元素字体为0 ，子元素重新设置字体。

ul{
	display: inline-block;
	list-style: none;
	background: #999;
	text-align: center;
	margin: 10px auto;
	font-size: 0;
}
li{
	display: inline-block;
	background: #555;
	padding: 5px 10px;
	color: #FFF;
	font-size: 12px;
}

方法四： jQuery 方法

HTML：

<ul class="removeTextNodes">
	<li>首页</li>
	<li>产品介绍</li>
	<li>联系我们</li>
	<li>关于我们</li>
</ul>

JS：

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

通过jQuery来改变“nodeType”的值，从而实现我们需要的效果。

全兼容的样式解决方法：

使用纯 CSS 实现兼容的方法，在父元素中设置 font-size:0 。用来兼容 Chrome，使用 letter-space:-n px 来兼容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;
}

参考文献：

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

未经允许不得转载：w3h5 » li、img等元素设置inline-block后的空白间距问题