行内元素,display:inline-block元素,元素间间隙问题的解决

当我们想让元素横向排开时,会使用span标签,或者是将块级元素设置为display:inline-block时

有时会发现,相邻两个元素之间,明明没有设置margin或者是padding值,但是有间隙

原因是因为html代码中相隔的span标签间有回车

HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px

解决办法
1、由于回车产生的间隙,去掉回车就好了。但是这样写在一行,代码可读性变低

2、为父元素中设置font-size: 0,在子元素上重置正确的font-size,子元素必须重置字体。

3、元素float:left,但是会有塌陷。

4、设置父元素,display:table和word-spacing:normal(推荐)

原文地址:https://www.cnblogs.com/sweeeper/p/13157831.html