一、内联元素空隙问题
当我们使用"display:inline-block"把块集元素转换为内联元素时，会发现每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
从节点（node）的角度说，这个问题产生的真正原因是：当我们换行时，会产生一个文本节点，这个文本节点的内容是换行
常见的节点以及节点类型值
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
二、总结一下解决方案：
1、既然是由于行符、制表符（tab）、空格等字符引起，那么一种方法就是去掉内联元素之间的换行符、制表符（tab）、空格
比如：（1）用HTML注释代替换行
<div>
<span>内联元素</span><!--
--><span>内联元素</span>
</div>
（2）元素开始标签紧跟结尾标签
<li>
one</li><li>
two</li><li>
three</li>
<li>one</li
><li>two</li
><li>three</li>
缺点：这样代码很难看
2、在父元素中设置font-size: 0，然后在子元素上重置正确的font-size。
缺点：inline-block元素必须设定字体，不然行内元素中的字体不不显示。
3、为inline-block元素添加样式float:left，加了浮动的内联元素是不会有这个空隙的。
4、使用margin-right负值
缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px，而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。
注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距，而Firefox下元素之间有重叠。
其中IE6/7下始终存在1px的空隙，需要使用word-spacing减少单词间的空白（即字间隔） word-spacing:-1px;
5、使用display:table和word-spacing（最优的方法）
.box{
display:table; /* 调教webkit*/
word-spacing:-1em;/*其他浏览器*/
}
6、设置字间距或者字符间距
在父容器的样式中改变“word-spacing”或者“letter-spacing”为负值，一般为-5也就好的。这种办法也会消除空隙，但是还是会产生文本节点。这里要注意的是改变间距会影响后面所有的字体，所有在后面要修改回来。