inline-block元素间距

做项目过程中发现元素设置为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/