Inline-block 元素空白问题

问题

两个 display: inline-block 的元素并排会产生一段 空白

原因

行内块 元素中间的 空白符（空格、回车）会被浏览器处理，根据 css 中 的 white-space 属性的处理方式（normal 合并多余空白），原来 html 代码中的回车会被转成一个 空白符，在字体不为 0 的情况下，空白符占据一定的 宽度，所以导致出现了 间隙。

解决

• 将子元素写在同一行
• 设置父元素 font-size: 0，子元素设置 正确的 font-size
• 改为 flex 布局
• 改为 float 布局