inline-block元素间4px间隙源于HTML解析器将换行符/空格渲染为U+0020文本节点，宽度≈父容器font-size的0.25em；推荐font-size:0+子元素重设字号或现代flex+gap方案。
为什么 inline-block 元素间总多出 4px 间隙
这不是 CSS 没设对，是 HTML 解析器把源码里的换行符和空格当成了文本节点，并渲染为一个可见空格——只要父容器字体大小是 16px，这个空格宽度就近似 8px（注意：不是固定值，随 font-size 变化）。 和 默认是 inline-block，所以手写成多行就会中招。
静态 HTML 中怎么彻底去掉标签间空白
最直接的办法就是别让换行和空格进 DOM。不是靠删掉缩进，而是让 HTML 字符串里压根没有这些字符：
- 静态写法：把相关标签写在同一行，中间不加换行、不加空格 ——
- 别用注释隔开，注释也会被解析为文本节点（虽然不可见，但可能影响布局上下文）
- 如果必须保留可读性，构建时用 HTML 压缩工具（如 html-minifier），或在 webpack/vite 中启用
html-loader的minify选项
动态插入 HTML 时如何避免生成空白文本节点
用 .html() 或 innerHTML 插入字符串时，只要字符串本身含换行或空格，就可能复现静态间隙问题：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ✅ 正确写法：ES6 模板字符串连写，无换行 ——
$("#container").html(``) - ❌ 错误写法：用
+=多次拼接，或模板字符串内换行缩进，哪怕只多一个空格也会触发 - ⚠️ 注意：
$("").appendTo(...)这种方式由 jQuery 解析 DOM，不同版本对空白处理不一致，不推荐用于间隙敏感场景
用 CSS 统一控制间隙比改 HTML 更可靠
尤其当结构复杂、多人协作或需复用组件时，靠改 HTML 格式不现实，CSS 层面拦截更稳：
- 给父容器设
font-size: 0，再给子元素显式恢复字号 ——.group { font-size: 0; } .group > * { font-size: 16px; } - 改用
display: flex+gap，天然无视源码空白，且支持响应式 ——.group { display: flex; gap: 8px; } - 慎用
word-spacing：它会影响所有单词间距，不只是标签间空白，容易误伤文本内容
真正难处理的不是“怎么消灭间隙”，而是团队里有人手写多行 HTML、有人动态插入、还有人用 CMS 输出带缩进的片段——这时候统一用 CSS 方案，比反复教育书写习惯更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
