inline-block 元素出现空白字符问题

inline-block 之间会产生空白符（whitespace），在进行一些排版过程处理的时候，这个空白符会影响我们的排版布局。

要消除此空白符产生的影响，有以下解决办法

不换行

inline-block 代码之间不使用空白字符（空格和换行），此方法会影响代码可读性

<ul
><li>1li
><li>2li
><li>3li
>ul>

父元素设置font-size：0

子元素如果需要字体的话，会需要重新在子元素添加fon-size的设置。
在没有字体的布局的情况下课使用此方法

父元素 word-spacing: -1em;

不保证一定能生效，未测试多种情况下不同浏览器的效果如何

white-space-collapse:discard

忽略空白，该属性浏览器现未支持，存在于CSS规范中

参考：

有哪些好方法能处理 display: inline-block 元素之间出现的空格？ - 知乎