在使用 inline-block 布局时，元素之间存在一个空格的间距，这是由于 HTML 中的空白字符（空格、换行、制表符等）会被当作渲染内容的一部分。具体原因如下：
1. HTML 中的空白字符
当你在 inline-block 元素之间写空格、换行或制表符时，这些空白字符会被浏览器作为“文本节点”来处理。因此，两个 inline-block 元素之间会有一个空格的间距。
HTML 代码中的空白字符（如空格和换行）会被当作“文字”来渲染，并在两个元素之间生成间隔。这个间隔的大小取决于字体的大小，通常会等于当前字体的字符宽度。
2. 空格产生的效果
例如，下面的代码中，两个 inline-block 元素之间会产生一个空格。
示例：
<div style="display: inline-block; background-color: red; width: 100px; height: 100px;"></div>
<div style="display: inline-block; background-color: blue; width: 100px; height: 100px;"></div>
由于两个 inline-block 元素之间存在一个空格字符，最终的渲染效果是两个块元素之间会有间隙。
3. 如何去除空格间距
有几种常见的方法来解决这个问题：
1. 删除 HTML 中的空格字符
在 HTML 中完全删除 inline-block 元素之间的空格或换行字符。例如：
<div style="display: inline-block; background-color: red; width: 100px; height: 100px;"></div><div style="display: inline-block; background-color: blue; width: 100px; height: 100px;"></div>
这样可以消除空格间距。
2. 将父元素的 font-size 设置为 0
将父元素的 font-size 设置为 0，这样子元素的空白字符不会产生间距：
<div style="font-size: 0;"><div style="display: inline-block; background-color: red; width: 100px; height: 100px;"></div><div style="display: inline-block; background-color: blue; width: 100px; height: 100px;"></div>
</div>
通过将父容器的 font-size 设置为 0，inline-block 元素之间的间隙就会消失。你可以针对子元素恢复合适的字体大小，如：
<div style="font-size: 0;"><div style="display: inline-block; background-color: red; width: 100px; height: 100px;"></div><div style="display: inline-block; background-color: blue; width: 100px; height: 100px; font-size: 16px;"></div>
</div>
3. 使用负的 margin
给 inline-block 元素添加负的 margin 来去除间隙：
<div style="display: inline-block; background-color: red; width: 100px; height: 100px; margin-right: -4px;"></div>
<div style="display: inline-block; background-color: blue; width: 100px; height: 100px;"></div>
在这种情况下，通过 margin-right 给第一个元素添加负值来缩小或去除空格。
4. 使用 CSS 注释
另一种技巧是通过在 inline-block 元素之间使用 CSS 注释来去除空白字符：
<div style="display: inline-block; background-color: red; width: 100px; height: 100px;"></div><!--
--><div style="display: inline-block; background-color: blue; width: 100px; height: 100px;"></div>
这里使用了注释 <!-- --> 来移除空格字符，这样浏览器不会把它当作一个文本节点来渲染。
4. 总结
inline-block元素之间的空格间距是由于 HTML 中空格、换行等字符被当作文本节点处理。- 可以通过删除空白字符、设置父元素的
font-size为0、使用负margin或者 CSS 注释来解决这个问题。