去除 inline-block 元素间距

案例重现

布局时经常能发现inline元素和inline-block元素水平呈现的元素间，会存在着一些意想不到的间距，举例：

.inline-block {
  display: inline-block;
  background-color: green;
  color: #FFF;
}

<div class="content">
  <div class="inline-block">
    测试
  </div>
  <div class="inline-block">
    测试
  </div>
</div>

由于换行和空格分割符的存在，行内元素间将被渲染为一个小间距了。

解决办法1-元素间移除空格和换行

<div class="inline-block">
一个</div><div class="inline-block">
测试</div>

这样看着仍旧不太舒服，尤其是项目里缩进层级深的时候

解决办法2-父元素设置 font-size:0

.content {
  font-size: 0;
  -webkit-text-size-adjust: none;
}

-webkit-text-size-adjust:none;，为了兼容旧版 chrome 对于字体大小的限制的。

此方法基本上可以解决大部分浏览器下的兼容情况，IE7 可能存在 1 像素的间距 bug。这个方法算是最好用了。

解决办法3-flex

.content {
  display: flex
}

也能解决，只不过引入了 flex 可能会干扰原本的布局。

解决办法4-float

.inline-block {
  display: inline-block;
  background-color: green;
  color: #FFF;
  float: left;
}

也能解决，只不过引入了 float 可能会干扰原本的布局。