解决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;}