inline-block的缝隙

元素加inline-block之后默认右边是有缝隙的，如果在子元素设置font-size过小可能会出现上边距产生缝隙，而同样的字体大小设置在父元素上不会产生上下缝隙。
见下图：
font-size在子元素上：

font-size在父元素上：

解决右边所产生的缝隙

方法1：标签头尾无空格

缺点，标签可读性很差

方法2：标签头尾无空格

怪异写法

方法3：负margin

方法4：float浮动

为了得到我们想要的效果，并不是只能用inline-block,我们来看一下float的效果

方法5：父容器font-size为0

总结：父容器的font-size为0是最简单方法。父容器设置font-size为0后，我们可以随意设置父元素上的margin,子元素的font-size,padding等，都不会产生缝隙以及溢出。没有副作用，代码简洁。

inline-block支持ie8以上，如果需要兼容ie6.7可以加上一条*display: inline

display: inline-block; *display: inline