关于inline-block元素间隙的处理
参考橱窗外的小孩，原文链接https://www.cnblogs.com/showcase/p/10469361.html
如下，两个inline-block之间，会产生默认的间隙。原因是因为元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
<div> <input type="text" placeholder="请输入关键字 /> <button></button> </div>
那么，如何能处理掉这些间隙呢？列举以下几个（但不限于）五个方法：
1，去除元素间的空白
通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行，可以去除元素间的空白，或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等，例如这么写：
<ul> <li>one</li ><li>two</li ><li>three</li> </ul> <!-- or --> <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul>
2，父元素设置font-size为0，子元素单独再设置字体大小
如下所示：
.layout.inline-block .left-center-right {
font-size: 0;
}
.layout.inline-block .left-center-right>div {
font-size: 16px;
}
3，设置margin-right为负值
用margin负值来抵掉元素间的空白，不过margin负值的大小与上下文的字体和文字大小相关，并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用，也相对比较麻烦，因此不太推荐使用。
4，给inline-block元素加float或者flex
让行内块元素浮动起来，或者给父盒子加上display: flex; 都可以解决空白间隙的问题，不过这样处理的三栏式布局也就没必要用inline-block啦。
5，设置字符间距或者单词间距
这两个方法的原理有点像二所用的font-size，具体做法是给父元素一个letter-spacing或者word-spacing的负值，子元素再调整为0即可，具体使用字符间距还是单词间距其实大同小异。
/* letter-spacing */
.layout .left-center-right{
letter-spacing: -0.5em;
}
.layout .left-center-right>div{
letter-spacing: 0;
}
/* word-spacing */
.layout .left-center-right{
word-spacing: -0.5em;
}
.layout .left-center-right>div{
word-spacing: 0;
}