如何通过CSS消除inline-block盒子之间默认产生的空白间隙？-css教程-PHP中文网

消除 inline-block 元素间空白间隙的核心方法是移除父容器内的换行符和空格，或调整字体大小。具体做法包括将 html 源码中的标签紧挨书写、设置父元素 font-size: 0 并重置子元素字号，或使用负 margin。这些方法通过消除文本节点中不可见的空白字符来修复布局。

如何通过CSS消除inline-block盒子之间默认产生的空白间隙？

移除HTML源码中的空白字符

最直接且无副作用的方法是修改 HTML 结构，使

 标签之间没有空格或换行。浏览器会将源码中的空格、制表符和换行符解析为文本节点，这些文本节点在 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。这种方法兼容性好，但需注意继承关系。

											
												
												
													CSS
													CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
												
												下载
												
											
										

.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 可抵消部分间隙，但可能因字体差异导致残留间隙或重叠。此方法不如前两种稳定，建议优先使用前两种方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！