HTML中换行、空格、制表符被解析为U+0020空白字符，导致inline/inline-block元素间出现约4px间隙；根本原因是浏览器将换行符视为文本节点，非CSS问题，可用font-size:0+子元素重置字号、flex+gap或紧凑HTML字符串解决。
HTML中换行、空格、制表符会被浏览器解析为一个空白字符（U+0020），只要相邻元素是 inline 或 inline-block，这个空白就会渲染成几像素的水平间隙——这不是bug，是规范行为。
为什么 <button></button> 和 <input> 并排总有一条缝？
因为它们默认是 inline-block 元素，而你在 HTML 里写了换行或缩进（比如把 <button></button> 和 <input> 分两行写），浏览器就把那个换行当成了空格。哪怕你设了 margin: 0、padding: 0，也拦不住它。
- 现象：两个按钮之间出现约 4px 的不可见缝隙，DevTools 里能看到中间有个
#text节点 - 验证方法：在 Elements 面板里右键「Delete element」删掉那个
#text节点，缝隙立刻消失 - 注意：
display: flex或display: grid容器完全绕过这个问题，因为子元素不参与 inline 布局
font-size: 0 在父容器上真能吃掉所有空隙？
能，但必须配对使用：父容器设 font-size: 0 让空白文本节点“没字号”，再给每个子元素显式恢复字体大小。否则子元素文字会变看不见。
- 适用场景：需要保留
inline-block行为（比如要让子元素响应文字流方向），又不想改 HTML 结构 - 风险点：
font-size: 0会影响所有后代文本（包括子元素里的<span></span>、<em></em>），所以只应作用于直接子元素 - 示例写法：
.toolbar { font-size: 0; }<br>.toolbar > * { font-size: 14px; display: inline-block; }
用 JS 动态插入时怎么避免间隙？
关键不是“怎么插”，而是“插什么字符串”——jQuery 的 .html() 不会自动压缩空白，它原样解析你传入的字符串。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 安全写法：拼接紧凑字符串，不带换行和空格，例如：
$("#bar").html("<button>-</button><input type="number" value="1"><button>+</button>") - 危险写法：用模板字面量加缩进，哪怕看着整洁，也会引入空格：
`<button>-</button>\n<input>\n<button>+</button>` - 替代思路：用
document.createElement手动创建节点再 append，完全跳过字符串解析阶段
为什么 margin: -4px 不推荐？
负 margin 确实能视觉上盖住间隙，但它只是掩盖，不是消除。一旦字体大小变化、zoom 缩放、或父容器 line-height 调整，缝隙可能重新露头，且容易引发连锁布局偏移。
- 更隐蔽的问题：如果子元素有 border 或 background，负 margin 会让它们互相重叠，破坏点击区域
- 调试困难：DevTools 里看不出间隙来源，只能靠经验猜是不是 margin 撞上了
- 真正干净的解法永远落在 HTML 结构或布局模型上，而不是靠 CSS 抵消
最常被忽略的一点：间隙只存在于 inline 流中；只要把父容器设成 display: flex 或 display: grid，所有空格字符都会被忽略——但这要求你接受脱离传统文档流，且需检查旧浏览器兼容性（如 IE11 对 Flex 的部分支持缺陷）。
