inline-block元素间4px间隙源于HTML解析器将换行/空格解析为文本节点，其宽度=父容器font-size的0.25em；可用font-size:0+子元素重置字号、HTML注释隔断或display:flex+gap解决。

HTML里“多敲几个空格没用”不是bug，是规范；而“按钮之间莫名其妙多了4px间隙”也不是CSS写错了，是文本节点在干活。这两件事本质同源，都来自HTML解析器对空白字符的折叠与渲染规则。

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

这个间隙不是 CSS margin，也不是 border，而是 HTML 解析器把源码中标签间的换行符（\n）或空格，当成一个文本节点处理，并按当前 font-size 渲染成一个可见空格——宽度约等于当前字号下空格字符的宽度（比如 font-size: 16px 时通常≈4px）。

只要父容器未设置 display: block（或类似强制块级上下文），且子元素是 inline 或 inline-block（如 <button></button>、<input>、<span></span>），这个行为就生效。

• 动态拼接的 HTML（如 $("#box").html("<button>-</button><input><button>+</button>")）没间隙，是因为字符串里没换行/空格，压根没生成那个文本节点
• 静态 HTML 写成多行格式（带缩进），就一定会产生这个文本节点
• <div> 之间换行却没间隙？因为默认是 <code>display: block，空白文本节点不参与行内格式化上下文

  消除间隙的三种可靠方式及适用场景

  没有“最好”，只有“最匹配当前约束”。选哪种，取决于你是否能改 HTML 结构、是否要复用样式、是否需支持老浏览器。

  立即学习“前端免费学习笔记（深入）”；

  删源码空白（零依赖，适合组件模板或构建时注入）

  把 HTML 字符串写成单行，中间不留任何空格或换行：

  <div class="group"><button>-</button><input type="number" value="1"><button>+</button></div>

  font-size: 0 + 子元素恢复字号（推荐用于 CSS 组件库或通用容器类）

  父容器设 font-size: 0 抑制空白字符渲染，再为子元素显式设回字号：

  .inline-group { font-size: 0; }
  .inline-group > * { font-size: 16px; display: inline-block; }

  注释隔断（保留可读性，但语义污染）

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  用 HTML 注释“吃掉”标签间的空白：

  <div class="group"><button>-</button><!--
  --><input type="number" value="1"><!--
  --><button>+</button></div>

  注意：不要用 <!-- --> 紧贴标签（如 <button>-</button><!-- --><input>），某些旧版 IE 会误判。

  white-space 属性只管文本节点，不管元素间隙

  white-space 控制的是**元素内部文本内容**的空白处理逻辑，比如 <p>hello world</p> 里那堆空格怎么显示。它对 <button></button> <input> 这种标签之间的空白完全无效。

  常见误解：

  • 给父容器设 white-space: nowrap → 不能消灭 inline-block 间隙，只会让内部文字不换行
  • 给父容器设 white-space: pre → 同样无效，还可能让所有换行都变成 <br> 效果
  • 想靠 letter-spacing 或 word-spacing 调整间隙 → 它们只作用于文字，对元素间空白无感

  真正该盯住的，永远是：这个间隙是不是由一个看不见的文本节点撑开的？它在哪一级 DOM 上？

  什么时候该用  ，什么时候不该用

    是 non-breaking space，语义是“此处必须有一个不可断行的空格”。它不是“多加空格”的快捷键。

  该用的场景：

  • 防止 “¥100” 拆成两行（货币符号和数字之间）
  • “Mr. Smith” 中点号后防断行
  • 表格中空 <td></td> 需要占位（否则边框塌陷）

  不该用的场景：

  • 为了在两个 <div> 之间“加点空隙”——应该用 <code>margin
  • 排版按钮组时狂塞   模拟间隙——这是用错语义，且响应式下会失控
  • 替代 text-indent 做首行缩进——应该用 CSS

  真正难处理的，从来不是“怎么加空格”，而是“怎么让浏览器别把我的换行当空格”。这个问题一旦厘清，大部分所谓“空格 bug”就自动消失了。