inline-block的缝隙

inline-block的缝隙

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

02.png

font-size在父元素上：

01.png

解决右边所产生的缝隙

方法1：标签头尾无空格

缺点，标签可读性很差

03.png

方法2：标签头尾无空格

怪异写法

04.png

方法3：负margin

05.png

06.png

方法4：float浮动

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

07.png

08.png

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

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

09.png

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

display: inline-block; *display: inline