使用display: inline-block排版，元素之间出现缝隙，并没有使用任何margin设置。
原因就是元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
解决方法：在父元素设置font-size: 0， 然后在子元素上重置正确的font-size，这样就ok了~
使用display: inline-block排版，元素之间出现缝隙，并没有使用任何margin设置。
原因就是元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
解决方法：在父元素设置font-size: 0， 然后在子元素上重置正确的font-size，这样就ok了~
本文标题：消除display: inline-block引起的元素之间的缝
本文链接：https://www.haomeiwen.com/subject/pzqluttx.html
网友评论