做项目过程中发现元素设置为inline-block后，彼此之间会有间距，有时候不是我们想要的效果，这时候就需要将间距去除掉。
后来上网查了下，已有前人总结了不少好的方法。这里主要借鉴了张鑫旭博客中介绍的一些方法。我在这里总结一下。
现象：
1.如下代码：
<span>首页</span>
<span>联系我们</span>
<span>关于我们</span>
<span>新闻中心</span>
<span>网站地图</span>
span{
display:inline-block;
width:100px;
height:40px;
line-height:40px;
background-color:rgb(12,12,12);
}
这个时候几个导航之间会出现间距。有时候是不需要的。
2.如下代码：
<input type='text' placholder='搜索'>
<button>搜索</button>
input,button{
display:inline-block;
outline:none;
}
这个时候input和button之间还是会有间距，假如设计要求按钮和表单紧紧挨着，那就是不理想的。
解决方案：
1.移除空格
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。
不过这样的话，代码可读性可能比较差。
想要兼顾可读性的话，可以在标签相接处不换行，在其他位置换行。类似于：
<span>
导航1</span><span>
导航2</span><span>
导航3</span>
不同标签有不同写法，这里可以脑洞。
2.使用margin负值，margin负值可以解决布局中很多问题。这里不多说。
至于margin负值的值具体是多少，张先生有另外一篇文章，很详细：
http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/
3.标签不闭合。
严格意义上来讲，标签不闭合是不符合HTML5规范的。不过由于HTML是松散类型的文本标记语言，不闭合标签在浏览器中能够正确的解析。在这种场景下，不闭合标签能够实现要求，解决问题，也是一种思路。不过对于代码强迫症来讲，这是接受不了的。比如说我。
<span>导航1
<span>导航2
<span>导航3
4.使用font-size=0
前面提到，inline-block之间的空白是由于代码中的空格，而空格的大小，是受其周围元素的字号影响。所以，可以给父元素加一个属性，font-size:0;在inline-block元素上设置真实的font-size
<div class='par'>
<span>导航1</span>
<span>导航1</span>
<span>导航1</span>
</div>
.par{
font-size:;
}
.par span{
font-size:12px;
}
5.letter-spacing(字符间距)和word-spacing(单词间距)
<div class='par'>
<span>导航1</span>
<span>导航1</span>
<span>导航1</span>
</div>
.par{
letter-spacing:-3px;
}
.par span{
letter-spacing:;
}
.par{
word-spacing:-6px;
}
.par span{
word-spacing:;
}
以上是我简单总结。张鑫旭的博客中有详细介绍。
原文标题：去除inline-block元素间间距的N种方法
原文链接：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/