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:0;      
}
.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:0;
}

.par{
  word-spacing:-6px; 
}
.par span{
  word-spacing:0; 
}

 

以上是我简单总结。张鑫旭的博客中有详细介绍。

原文地址

原文标题：去除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/