消除 inline-block 元素间空白间隙的核心方法是移除父容器内的换行符和空格，或调整字体大小。具体做法包括将 html 源码中的标签紧挨书写、设置父元素 font-size: 0 并重置子元素字号，或使用负 margin。这些方法通过消除文本节点中不可见的空白字符来修复布局。
移除HTML源码中的空白字符
最直接且无副作用的方法是修改 HTML 结构，使 <div> 标签之间没有空格或换行。浏览器会将源码中的空格、制表符和换行符解析为文本节点，这些文本节点在 <code>inline-block 渲染时占据宽度。通过紧凑书写，可以彻底消除间隙。
<div class="container"> <div class="item">A</div><div class="item">B</div><div class="item">C</div> </div>
预期结果：三个盒子紧密相连，中间无间隙。每个盒子的宽度仅由其内容或 CSS 宽度决定，总宽度等于各盒子宽度之和。
立即学习“前端免费学习笔记（深入）”；
使用 font-size: 0 重置间距
当无法修改 HTML 源码（如模板引擎生成）时，可通过 CSS 控制空白字符的显示宽度。将父容器的 font-size 设为 0，使得其中的空白字符不占空间，然后为子元素恢复正常的 font-size。这种方法兼容性好，但需注意继承关系。
.container {
font-size: 0;
}
.item {
display: inline-block;
font-size: 16px; /* 恢复子元素字号 */
width: 100px;
height: 100px;
background: red;
}预期结果：子元素正常显示，间距消失。需确保所有需要显示文字的子孙元素都显式设置了 font-size，否则文字也会因继承而变小或不可见。
基于 margin-right: -4px 的具体问题
若使用负 margin 消除间隙，需关注具体数值与字体大小的关系。例如，当 font-size 为 16px 时，一个空格通常占用约 4-8px 宽度（取决于字体）。设置 margin-right: -4px 可抵消部分间隙，但可能因字体差异导致残留间隙或重叠。此方法不如前两种稳定，建议优先使用前两种方案。
