消除display: inline-block引起的元素之间的缝隙

使用display: inline-block排版,元素之间出现缝隙,并没有使用任何margin设置。

原因就是元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。

解决方法:在父元素设置font-size: 0, 然后在子元素上重置正确的font-size,这样就ok了~

你可能感兴趣的:(消除display: inline-block引起的元素之间的缝隙)