你在使用 inline-block 元素的时候一定会遇到两个bug
1 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
标准答案：将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px
实际工作：使用 block 或 float 或 flex，不要使用 inline-block
2 两个不同高度的 inline-block 元素无法对齐
还有一种现象就是 img 元素下面无缘无故多出几像素。
标准答案：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
实际工作：使用 float 或 flex，不要使用 inline-block
如果想搞清楚到底为什么会有这两个 bug，就看这篇文章：
https://zhuanlan.zhihu.com/p/2580899539
看完之后，保证你更加搞不清楚。
因为这是字体设计相关的知识，不是 CSS 知识。
我大概在工作的前两年，都没搞懂这个知识点。
来自方方老师文章
