解决display:inline-block内联块元素间隙问题，首先要弄清楚display:inline-block属性的含义，以及产生间隙的原因

什么是display:inline-block属性

display:inline-block是将内容作为块对象呈递，以内联块元素显示

display:inline-block内联块元素特点

1、支持全部css样式

2、如果没有设置宽高，宽高由内容决定。

3、不会独占一行，相邻的内联元素会排在同一行

4、代码换行，盒子会产生间距

5、子元素是内联块元素，父元素可以用 text - align 属性设置子元素水平对齐方式。

display:inline-block;产生间隙的原因（4px）

内联元素设置display:inline-block导致换行或空格会占据一定的位置，从而产生间隙，大约4个像素

解决办法：

方法一（不推荐）：在html代码中除去当前元素的空格或换行，不推荐，影响代码美观以及后期维护例如：

<div style="display: inline-block;"></div>
<div style="display: inline-block;"></div>
修改为

<div style="display: inline-block;"></div><div style="display: inline-block;"></div>

方法二（不推荐）：当前内联元素的父元素中设置font-size:0;缺点在chorme中不支持，但是可以设置例如：

<div style="font-size:0;">
  <div style="display: inline-block; font-size: 14px;"></div>
  <div style="display: inline-block; font-size: 14px;"></div>
</div>

方法三 ： 使用负margin，这个办法在兼容性方面表现较好。

<div style="display:inline-block; margin-right:-4px;"> ... </div>
<div style="display: inline-block; margin-right:-4px;"> ... </div>

方法四（推荐）：当前内联元素的父元素中设置letter-spaceing:-4px;控制文字间的水平距离，可以让文字水平方向上重叠，这样就抵消了空格或换行的占位。

display:inline-block;在IE6/7中不兼容的解决办法

div { display:inline-block; _zoom:1;_display:inline;}

div { display:inline-block; *zoom:1;*display:inline;}