inline-block元素之间的间距

最近看源码看得有点累，准备写一篇css的来调节一下。
这篇记录学习拖了好长时间，今天我准备把这篇写完。
首先，先来看一下(后面我都用这个例子来讲)。

    

        
        Submit
    

看到mio，确实是有一个间隙。这个间隙是因为标签在编辑器里换行浏览器会把它解析成空文本节点。那么解决的办法是什么？

简单粗暴

最简单的办法就是把标签写成一行。

Submit

看了一下，确实把间隙去掉了。但是如果标签很多，这个办法就有点不好使

1. 用负margin

就是把元素的margin设置成负数，这里把button的margin-left设置成-5px，是可以的。
但是这个办法有一个不好的，就是不同的浏览器的这个间距不同，所以设置的margin-left是不同的。

2. font-size:0

.container{
  font-size: 0px;
}

用这种办法也可以解决间隙的问题，而且不会用兼容性的问题。但是需要注意的是，要给子元素设置字体大小，因为font-size是一个可以继承的属性。

3. letter-spacing和word-spacing

这两个属性的区别是什么？
letter-spacing是字符间距，word-spacing是单词间距。我们可以通过将这两个值设置为负数来消除空隙。而且浏览器兼容性也很好。不同的浏览器间隙大小不同，但是如果用letter-spacing设置值足够大，就会忽略掉兼容性的问题，而且元素不用重合，word-spacing如果设置的很大，元素就会重合。所以相比较起来，我更偏向使用letter-spacing。

当然还有一些其他的方法，我以后看到还会继续补充。