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
网友评论