（统一规定display：inline简写为inline；display：block简写为block；display：inline-block简写为inline-block；）

测试:(测试浏览器包括有IE8，IE9，IE10，chrome，firefox)

代码结构为，html代码：

css代码：

各大浏览器表现

IE8

IE9

IE10

chrome

firefox

从上面的测试结果来看，那么可以得出几点结论：

1、不管是inline元素还是block元素亦或者inline元素与block元素混写，当设置为inline-block都会产生间隙；

2、产生的间隙在同个浏览器中会有一样大的效果；

3、不同浏览器之间间隙不一样；

那么是什么让其产生这样的间隙，要知道这样的间隙对其不清楚的情况下，会无法很好的做到还原设计图的；

W3C中规定以下元素属于空白符：

ASCII空格()

ASCII制表符()

ASCII换页符()

零宽度空格()

W3C中规定

1、折行被定义为一个回车，一个换行符，或者一个回车、换行的组合，所有的换行构成了空白行。

2、对于多个连续的空白符（空格、换行符、回车符），浏览器会将他们合并为一个空白符。

为了验证空隙是不是空白符产生的，我们调整一下代码结构

IE8

IE9

IE10

chrome

firefox

经过上面的改变代码结构，我们看到，间隙被消除了，也就可以得出结论：间隙是空白符产生的。

现在知道了，产生间隙的原因是与空白符有关，那么解决了空白符，也就解决间隙问题

那么要是写代码的时候这样写，那估计自己都看不出自己写什么，更不用说是维护问题了。

因此这种方法只是作为一种理论上的解决方法，极不推荐。

对HTML代码进行压缩虽然我们不可能像上面那样去组织代码，但是我们可以使用自动化工具，对HTML代码进行压缩。使用自动化工具将代码压缩，压缩工具会删除那些空格。从而达到删除空白符，进而消除间隙。

这是一种方法，但是对于没有使用自动化工具的人来说，并没有得到实际性解决。所以这种方法虽然可以消除间隙问题，但是并不能广泛使用。

chrome，FF，IE8，IE9，IE10下样式都一样，都是无间隙。

那么有什么方法可以控制间隙呢，达到对间隙的可控性，更完美的还原出设计稿，事实上是有解决方法的。

刚刚知道了间隙是由于空白符产生的，其实空白符也是一种字符，那么现在从大脑知识库中查找一下有什么属性是控制字体的，font-variant:;font-family:;font-style:;font-size:;font-weight:;color:;direction:;line-height:;text-align:;text-decoration:;text-indent:;text-shadow:;text-transform:;text-overflow:;unicode-bidi:;white-space:;word-spacing:;letter-spacing:;

现在采用排除法，

font-variant是控制大小写的，不符合，排除；

font-family是控制字体的，排除；

font-style是定义字体风格的，不满足，排除；

font-size是控制大小的，可能满足；

font-weight是控制字体粗细的，不满足，排除；

color是控制字体颜色，不满足，排除；

direction是控制字体方向的，不满足，排除；

line-height是控制行高，不满足，排除；

text-align是控制字体的排列对齐方式的，不满足，排除；

text-decoration是控制字体的修饰，不满足，排除；

text-indent是控制首行文字缩进的，不满足，排除；

text-shadow是控制文字阴影的,不满足，排除；

text-transform是对英文文本的大小写状态，不满足，排除；

text-overflow是定义文本超过区域时处理方法的，不满足，排除；

unicode-bidi是利用更加健壮的方式去处理文本的方向的，可能满足；

white-space是处理元素内空白的，用于折行处理，不满足，排除；

word-spacing是增加或者减少单词间的空白的，可能满足；

letter-spacing是调整字母之间的间距，可能满足;

因此一轮排除下来，可能满足的消除间隙的属性有：font-size；letter-spacing；word-spacing；

首先利用font-size解决间隙问题

对于font-size这个属性大家都很熟悉，是控制字体的，既然空白符是个字体，那么，只要在父元素设置font-size：0;然后子元素重新设置font-size规定字体大小就可以将间隙视觉隐藏掉，达到消除间隙的效果；

chrome，FF，IE8，IE9，IE10下样式都一样，都是无间隙。

可以得出结论：

1、font-size：0;是可以解决问题的。

利用word-spacing解决间隙问题

首先先将样式改变一下，div的word-spacing：-8px;dl的word-spacing：-7px;ul的word-spacing：-30px;

chrome浏览器下各个元素渲染情况如下：

可以看出div里面的子元素没有发生重叠同时间隙也消除了。而dl里面的元素却是有1px的间隙，ul里面的li元素发生了重叠。

可以得出结论：

1、chrome下，间隙为8px。

2、chrome下，当word-spacing值大于间隙的时候会发生重叠。

在firefox下我们将div的word-spacing：-5px;dl的word-spacing：-4px;ul的word-spacing：-30px;

firefox浏览器下各个元素渲染情况如下：

可以看出，div，ul里面的子元素并没有发生重叠，而且间隙也被消除。

而dl里面的子元素中间有间隙而第一个元素和第二个元素以及第三个元素和第四个元素之间有1px的间隙。

我们将div，dl的word-spacing：-4px;然后看看渲染情况。

因此可以得出结论：

1、firefox下，间隙不统一，中间的间隙为4px，而两边间隙为5px。

(根据进一步的测试，新版（39.0），会发生以上情况；而之前的版本（37.0.2）的情况是，间隙大小一致，都是8像素，并且不会发生重叠。)

2、firefox下，当word-spacing值大于间隙时，并不会发生重叠。

3、firefox下，word-spacing设置为4px时，中间的间隙消除，两边留白1px；

在IE10，IE9，IE8下我们将div的word-spacing：-4px;dl的word-spacing：-3px;ul的word-spacing：-30px;

IE10浏览器下各个元素渲染情况如下：

IE9浏览器下各个元素渲染情况如下：

IE8浏览器下各个元素渲染情况如下：

可以看出，div，ul里面的子元素并没有发生重叠，而且间隙也被消除。而dl里面的子元素中间有1px的间隙。

因此可以得出结论：

1、IE8，IE9，IE10下，渲染情况一样。

2、IE8，IE9，IE10下，间隙为4px。

3、IE8，IE9，IE10下，当word-spacing值大于间隙时，并不会发生重叠。

总结上述内容：

1、chrome浏览器间隙是8px；IE8，IE9，IE10间隙是4px；而firefox间隙不统一，中间间隙为5px，而两边间隙为4px；

2、使用word-spacing超过间隙时，chrome浏览器会被重叠，而IE8，IE9、IE10，firefox不会发生重叠问题；

利用letter-spacing解决间隙问题

先来认识一下letter-spacing属性

根据定义，letter-spacing是控制字符之间的空白的。

首先先将样式改变一下，div的letter-spacing：-8px;dl的letter-spacing：-7px;ul的letter-spacing：-30px;

chrome浏览器下各个元素渲染情况如下：

可以看出div里面的子元素没有发生重叠同时间隙也消除了。而dl里面的元素却是有1px的间隙，ul里面的li元素发生了重叠。

可以得出结论：

1、chrome下，间隙为8px。

2、chrome下，当letter-spacing值大于间隙的时候会发生重叠。

在firefox下我们将div的letter-spacing：-5px;dl的letter-spacing：-4px;ul的letter-spacing：-30px;

firefox浏览器下各个元素渲染情况如下：

可以看出，div，ul里面的子元素并没有发生重叠，而且间隙也被消除。而dl里面的子元素中间有间隙而第一个元素和第二个元素以及第三个元素和第四个元素之间有1px的间隙。

我们将div，dl的letter-spacing：-4px;然后看看渲染情况。

因此可以得出结论：

1、firefox下，间隙不统一，中间的间隙为4px，而两边间隙为5px。

2、firefox下，当letter-spacing值大于间隙时，并不会发生重叠。

3、firefox下，letter-spacing设置为4px时，中间的间隙消除，两边留白1px；

在IE10，IE9，IE8下我们将div的letter-spacing：-4px;dl的letter-spacing：-3px;ul的letter-spacing：-30px;

代码结构更改为如下图所示

IE10浏览器下各个元素渲染情况如下：

IE9浏览器下各个元素渲染情况如下：

IE8浏览器下各个元素渲染情况如下：

可以看出，div，ul里面的子元素并没有发生重叠，而且间隙也被消除。而dl里面的子元素中间有1px的间隙。

因此可以得出结论：

1、IE8，IE9，IE10下，渲染情况一样。

2、IE8，IE9，IE10下，间隙为4px。

3、IE8，IE9，IE10下，当letter-spacing值大于间隙时，并不会发生重叠。

总结上述内容：

1、chrome浏览器间隙是8px；IE8，IE9，IE10间隙是4px；而firefox间隙不统一，中间间隙为5px，而两边间隙为4px；

2、使用letter-spacing超过间隙时，chrome浏览器会被重叠，而IE8，IE9、IE10，firefox不会发生重叠问题；

总结上述：

消除间隙的方法有以下五种：

1、使用自动化工具压缩HTML代码，达到从代码层次上消除空白符；

2、在父元素上设置font-size：0；而在子元素设置font-size为规定字体大小；

3、使用word-spacing达到消除间隙问题

3.1、chrome浏览器间隙是8px；而IE8，IE9，IE10是4px；firefox浏览器中间间隙为4px，两边间隙为5px；

3.2、使用word-spacing超过间隙时，chrome浏览器会被重叠，而IE8，IE9，IE10，firefox不会发生重叠；

4、使用letter-spacing达到消除间隙问题（使用word-spacing和letter-spacing在处理inline-bloxk间隙的时候，效果是一样的）

4.1、chrome浏览器间隙是8px；而IE8，IE9，IE10是4px；firefox浏览器中间间隙为4px，两边间隙为5px；

4.2、使用word-spacing超过间隙时，chrome浏览器会被重叠，而IE8，IE9，IE10，firefox不会发生重叠；

那么综上结论，得出以下几种解决方法

1、使用自动化工具压缩html代码，达到消除间隙的功能，优点是代码被压缩，间隙可以被消除，文件变小，又不会影响可读性，缺点是自动化工具并非每个人都使用，也并非每个团队都在使用。如果为了消除间隙而改变原来的习惯，这种方法不太推荐。自动化工具使用的普及率不高是这种方法不能推广的致命缺点。

2、使用font-size消除间隙，优点是代码量小，成本小，整体影响小，能够兼容绝大部份浏览器。缺点是子元素要重新对字体赋值，另外对于某些不支持font-size：0的浏览器，无效。

3、使用word-spacing或者letter-spacing，根据上面研究探索结果可知，letter-spacing和word-spacing两个属性在处理inline-block的问题上是一致的，而解决方法可以根据谷歌浏览器设置合适的值，因为对于其他浏览器值是可以大于间隙并且不会发生重叠，而对于之前版本的firefox而言（间隙为8px），也是可以做到兼容的。优点是代码量小，成本也小，能够兼容流行的浏览器。缺点是子元素要重新对word-spacing或者letter-spacing设置normal；

结语：

通过自动化工具压缩HTML代码，虽然可以达到消除间隙的作用，但是工具的使用普及率不高，所以不推荐这种方式解决，尤其是不推荐为了解决间隙而强制使用自动化工具的做法。而通过font-size，word-spacing以及letter-spacing的做法基本相似，尤其是word-spacing和letter-spacing在间隙问题的处理上，则完全保持一致。三种消除间隙的方法都是通过父元素设置合适的值达到视觉上隐藏间隙，然后在子元素上面重新赋值，覆盖原来父元素上面的值，让子元素的内容得以呈现。所以推荐用font-size，word-spacing，letter-spacing三种之中的任意一种方式处理inline-block间隙问题，对于什么时候用哪个属性，那就要看具体的使用场景了。在不兼容不支持font-size：0；的情况下，我重点推荐font-size解决间隙问题，一方面font-size解决属性大家比较属性，使用起来顺手；另一方面font-size不会对使用什么字体和字体大小有依赖，处理方式都是一样的，而word-spacing和letter-spacing对于字体大小和字体样式有严重的依赖，不一样的字体和不一样的字体大小其间隙都是不一样的，所以设置的值也是不一样的，具有非常大的不稳定性和可变性。所以最终小编还是推荐使用font-size:0;解决inline-block的问题。

注：

既然是空白符(字体)，那么就和字体大小和字体样式有关，以上测试都是使用font-size：16px和微软雅黑。具体字体样式以及字体大小可能会影响间隙大小，所以大家可以根据真实的情况设置相应的值。