删空白能消除间隙，因为浏览器将标签间换行/空格解析为文本节点，在inline或inline-block环境下渲染为约4px空白；手动精准删除标签间空白（非属性内或文本内）即可根治，无需依赖CSS或JS补救。
直接删掉 HTML 源码里标签之间的换行和空格，是最有效、最可控的手动消除方式；其他方法（如 font-size: 0）虽可用，但容易漏设或影响子内容，不推荐作为“手动首选”。
为什么删空白就能消除间隙？
浏览器会把 <button></button> 和 <input> 之间的换行符、缩进、空格解析成一个文本节点，而该节点在 inline 或 inline-block 环境下会被渲染为约 4px 宽的空白——不是 CSS margin，也不是 bug，是 HTML 规范行为。
- 静态 HTML 中的换行 = 可见间隙
- 动态拼接字符串时若没写换行（如用 ES6 模板字符串连写），就不会生成该文本节点 → 无间隙
- DOM 结构看起来一样，但渲染层已不同
手动删空白的具体操作
不是“删掉所有空格”，而是精准删除**标签之间**的空白字符（换行、制表、多空格），保留标签内部文本和属性值里的空格。
- 错误写法：
<button>-</button>\n<input type="number" value="1">\n<button>+</button>（含换行） - 正确写法：
<button>-</button><input type="number" value="1"><button>+</button>（紧贴，无换行无空格） - 注意：属性值内空格照常保留，如
value="1 2"不受影响 - VS Code 等编辑器可开启“显示空白字符”（
editor.renderWhitespace: "all"），方便定位
font-size: 0 方案为什么容易出问题？
它确实能压掉空白字符的渲染高度，但副作用明显，尤其在手动维护时：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<input>的 placeholder 文字可能变小或消失（部分浏览器会继承父级font-size: 0） - 忘了给子元素重置
font-size，导致文字不可见（常见于临时改样式后忘记补全） - 嵌套结构中，中间某层漏设
font-size，间隙又回来 - 对
<textarea></textarea>、<select></select>等控件兼容性不一，需额外测试
别碰负 margin 和注释 hack
这些属于“掩盖症状”，不是解决根源，且引入新风险：
-
margin-left: -4px依赖固定像素，字体缩放、Zoom 变化时失效 -
<!-- -->插入注释虽能打断文本节点，但让 HTML 难读、难维护，且某些构建工具会自动移除注释 - JS 动态清洗（如正则替换）属于运行时补救，增加执行开销，且无法修复初始渲染闪动
真正要手动控制，就从源头掐断——写 HTML 时就不留标签间空白。这一步做完，间隙就没了，不需要查文档、不用试兼容、不依赖任何框架或构建步骤。
