inline-block元素间4px间隙源于HTML解析器将换行符/空格渲染为U+0020文本节点，宽度≈父容器font-size的0.25em；推荐font-size:0+子元素重设字号（IE8+兼容）或现代flex+gap方案。

别用空格字符控制元素间距，HTML源码里敲再多换行或空格，对布局几乎没影响；真正起作用的是 CSS 的 margin、padding 或 gap。

为什么 inline-block 元素间总多出 4px 间隙

这是新手最常撞墙的地方：把两个

写成换行格式，浏览器会把换行符解析为一个空格字符，再按父容器当前 font-size 渲染成约 4px 宽的空白（比如默认 16px 字号下，空格宽度 ≈ 0.25em ≈ 4px）。

常见错误现象：

• 按钮组、图标栏、导航项横向排列时“莫名错位”
• 用 DevTools 查看元素盒模型，发现 margin/padding 都是 0，但视觉上就是有缝
• 静态 HTML 有缝，JS 动态插入同一段 HTML 却没缝——因为字符串拼接没换行

可行方案：

• 给父容器加 font-size: 0，再给子元素单独设回字号（注意 display: inline-block 必须显式声明）
• 删掉 HTML 源码中标签间的换行和空格（写成
  ），适合简单结构
• 用注释隔断：
• 直接改用 display: flex，gap 属性天然忽略源码空白，且语义更清晰

什么时候该用   或 white-space: pre-wrap

仅当你要在纯文本流里保留“多个可见空格”的视觉效果时才考虑这些方案，比如中文标题对齐、代码片段缩进、防止图标和文字被空格粘连。

容易踩的坑：

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

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

下载

•   是不可换行的不间断空格，若用它分隔按钮图标和文字，white-space: nowrap 一加上就全卡死成一块
• white-space: pre 强制等宽字体、破坏语义，不该为“加间距”滥用
• white-space: nowrap 不仅禁换行，还会吞掉所有中间空格——不是你想要的“保留空格”

推荐做法：

• 需要微调字符间距：用  （六分之一字宽）或  （半角）
• 整段文本要保留缩进+允许折行：给容器加 white-space: pre-wrap
• 表格内单元格文字对齐：优先用 text-align 和 padding，别碰 cellspacing

动态渲染（如 innerHTML）和静态 HTML 间隙不一致怎么办

根本原因不在 JS，而在 HTML 解析规则：静态 HTML 中的换行/缩进会被解析为文本节点，而 JS 拼接字符串时若没写换行，就不会生成那个“空格文本节点”，所以没间隙。

统一表现的关键点：

• 不要依赖“源码是否换行”来控制视觉，那不可靠也不可维护
• 动态插入前，先 normalize() 清理 DOM 节点（但注意：它不处理字符串，只处理已挂载或 template.content 下的节点）
• 更稳的做法：所有布局级间隔全部交给 CSS 控制，比如用 gap: 8px 替代“靠换行留空”
• 如果必须用 inline-block，统一用 font-size: 0 方案，避免静态/动态行为割裂

最容易被忽略的一点：空格问题从来不是“怎么多打几个空格”，而是“要不要让这个空格被浏览器当成布局依据”。一旦意识到这点，你就不会再对着源码反复删空格了。

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