HTML中inline-block元素间出现约4px间隙，是因换行/空格被解析为文本节点；推荐方案依次为：父容器font-size:0+子元素重置字号、删HTML换行、float+清除浮动、改用flex布局。

HTML 中侧边栏链接（@#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@1@#@#@#@#@#@#@#@#@#@2

方案三：使用 float: left + 清除浮动

<nav><a href="#">首页</a>
  <a href="#">订单</a>
  <a href="#">设置</a>
</nav>

注意：float 会让元素脱离文档流，若后续有其他内容需考虑 margin 或高度塌陷

方案四：改用 Flex 布局（现代首选）

nav { font-size: 0; }<br>nav a { font-size: 14px; display: inline-block; }

天然无视空白字符，且支持对齐、间距控制（如 gap: 8px）

别踩 vertical-align 这个坑

如果你用了 inline-block 却没设 vertical-align，间隙可能不只是水平方向的——底部还会多出几像素空白（来自基线对齐）。这时加一句 vertical-align: top 或 middle 就能解决：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

nav a { float: left; }<br>nav::after { content: ""; display: table; clear: both; }

• 这个间隙常被误认为是 margin 或 padding，但检查 computed styles 会发现 margin/padding 都是 0
• 只在 inline 或 inline-block 下生效；block 或 flex 元素不受影响
• 移动端 Safari 对 font-size: 0 的兼容性偶有异常，建议搭配 letter-spacing: 0 双保险

真正麻烦的不是“怎么清”，而是“为什么清了还不行”——多数情况是多重 display 混用（比如父 flex 里套了 inline-block 子项），或 CSS 层叠覆盖了你的修复规则。先用开发者工具看 computed 的 display 和 white-space，再动手。

nav { display: flex; }<br>nav a { flex: none; } // 防止拉伸

nav a {
  display: inline-block;
  vertical-align: top; /* 关键 */
}

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