display:inline-block的优缺点
优点：将元素设置为行内块元素，既有行内元素可以一行显示多个元素的特性，又有块元素可以设置宽高的特性。
缺点：设置为display:inline-block后，元素与元素之间会多出空格间隙
空隙产生的原因：
当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化
解决办法
1、写代码时元素间不换行，中间不留空隙，但这样 会导致代码的可读性变差。
2、父元素设置font-size:0px;在子元素上设置想要的字体大小，但万一后面有很多的子元素，这种方法会导致代码冗余。
3、父元素设置display:table;word-spacing:-1em;
4、子元素设置浮动，如果这样做会显得display:inlline-block有点多余，因为块元素设置浮动就能在同一行了，为什么还要设display:inlline-block呢？而且都要清除浮动带来的父盒子塌陷问题。
5、子元素设置margin-left:负数px;(不兼容，不推荐)
来源：CSDN
作者：有理想，有期待
链接：https://blog.csdn.net/qq_41818857/article/details/103945364