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

Posted 2020-12-11 sweeeper

当我们想让元素横向排开时，会使用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（推荐）