HTML中inline-block元素间出现约4px间隙，是因换行/空格被解析为文本节点；推荐方案依次为：父容器font-size:0+子元素重置字号、删HTML换行、float+清除浮动、改用flex布局。
HTML 中侧边栏链接（<a></a>）之间出现意外空格，通常不是你写了空格，而是浏览器在解析 HTML 时对换行、缩进等空白字符的默认处理所致——尤其当 <a></a> 是 inline 或 inline-block 元素时。
为什么 <a></a> 在 <nav></nav> 里会有间隙
常见结构是把多个 <a></a> 放在 <nav></nav> 或 <ul></ul> 内，用换行缩进写得整齐：
<nav> <a href="#">首页</a> <a href="#">订单</a> <a href="#">设置</a> </nav>
但浏览器会把这些换行符和空格当作“文本节点”，而 <a></a> 默认是 inline 元素，会像文字一样保留这些空白并渲染为间距。
- 即使你没写空格，只要标签之间有回车或制表符，就可能产生约 4px 的间隙
- 如果给
<a></a>设了display: inline-block，这个现象更明显（因为 inline-block 会严格响应空白字符） -
font-size: 0在父容器上能消除间隙，但必须同时重置子元素的font-size，否则文字不可见
四种实操有效的清除方式（按推荐顺序）
不用框架、不依赖 JS，纯 CSS 可解：
立即学习“前端免费学习笔记（深入）”；
-
方案一：父容器设
font-size: 0，子元素重置字体 适用于<nav></nav>或<ul></ul>等直接包裹<a></a>的容器：nav { font-size: 0; }<br>nav a { font-size: 14px; display: inline-block; } -
方案二：HTML 标签写成“无缝”格式
把换行删掉，让结束标签紧贴下一个开始标签：
<nav><a href="#">首页</a><a href="#">订单</a><a href="#">设置</a></nav> -
方案三：使用
float: left+ 清除浮动nav a { float: left; }<br>nav::after { content: ""; display: table; clear: both; }注意：float会让元素脱离文档流，若后续有其他内容需考虑 margin 或高度塌陷 -
方案四：改用 Flex 布局（现代首选）
nav { display: flex; }<br>nav a { flex: none; } // 防止拉伸天然无视空白字符，且支持对齐、间距控制（如gap: 8px）
别踩 vertical-align 这个坑
如果你用了 inline-block 却没设 vertical-align，间隙可能不只是水平方向的——底部还会多出几像素空白（来自基线对齐）。这时加一句 vertical-align: top 或 middle 就能解决：
nav a {
display: inline-block;
vertical-align: top; /* 关键 */
}- 这个间隙常被误认为是 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，再动手。
