inline-block元素间空隙源于HTML空白符被解析为文本节点，宽度约font-size的1/4（通常4px）；可用font-size:0或flex布局解决，同时需注意ul默认margin导致的header-nav间隙。
为什么 inline-block 导航项之间总有 4px 空隙
这不是 CSS 写错了，而是 HTML 解析器把换行符和空格当成了文本节点——哪怕你写了 margin: 0、padding: 0，那个“看不见的空格”依然占位。常见现象包括：页码导航左右不对齐、<a></a> 按钮横向排列后间隙不均、最后一项莫名换行。
无序列表 <ul></ul> + <li> 结构也逃不开这问题，尤其当 <li> 设为 display: inline-block 时，间隙逻辑完全一致。
- 空隙宽度≈当前
font-size的 1/4（通常为 4px） - 只影响
inline和inline-block元素，block或flex子项不受影响 - 移动端下该间隙可能被放大，尤其配合
rem或缩放时
用 font-size: 0 快速封杀空白文本节点
最稳妥的现场急救法：给导航容器（如 <nav></nav> 或 <ul></ul>）设 font-size: 0，再单独给子元素（如 <a></a>、<li>）恢复字体大小。这样空白文本节点没了渲染尺寸，间隙自然消失。
示例：
立即学习“前端免费学习笔记（深入）”；
nav {
font-size: 0;
}
nav a {
display: inline-block;
font-size: 16px; /* 必须重设，否则文字不可见 */
padding: 8px 12px;
}⚠️ 注意：font-size: 0 会影响所有后代文本，包括图标字体（如 Font Awesome）、伪元素 ::before/::after 的内容，需单独处理。
改用 flex 布局一劳永逸
只要父容器是 display: flex，子元素无论原本是 inline、inline-block 还是 block，都不会再受 HTML 空白符干扰。这是现代方案里最干净的选择。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键点：
- 删掉所有
display: inline-block，直接对<nav></nav>或<ul></ul>设display: flex - 用
gap控制间距（如gap: 12px），比手动调margin更可控 - 居中对齐用
justify-content: center，左对齐用flex-start，右对齐用flex-end - 响应式断点下，可直接加
flex-wrap: wrap配合媒体查询
⚠️ 注意：若子项用了 float 或 position: absolute，它们会脱离 flex 流，gap 和 justify-content 对其无效。
ul 默认 margin 是 header-nav 间隙的真凶
很多人以为 header 和 nav 之间的空白是两者自身边距导致的，其实真正元凶常是 <nav></nav> 内部的 <ul></ul> ——浏览器默认给 <ul></ul> 加了 margin-top: 1rem 和 margin-bottom: 1rem，这个上外边距会从 <nav></nav> 顶部“溢出”，视觉上就变成 header 下方一段空白。
解决方式必须精准到 <ul></ul>：
nav ul {
margin: 0;
padding-left: 0;
}⚠️ 单独写 header { margin-bottom: 0 } 或 nav { margin-top: 0 } 无效，因为问题不在容器本身，而在它的子元素默认样式。
复杂点在于：同一份 HTML 可能同时存在多种间隙来源——HTML 空白符、<ul></ul> 默认 margin、标题 <h4></h4> 的 margin、甚至 line-height 导致的视觉错位。得逐层检查 computed styles，不能只盯一个地方改。
