HTML元素间4px间隙源于浏览器将换行符/空格解析为U+0020文本节点，其宽度≈父容器font-size的0.25em；font-size:0可消除该间隙但需为子元素显式重置字号，动态拼接时须避免字符串含换行或空格。
HTML空格间隙不是CSS没写好，而是浏览器把换行符和空格解析成了真实存在的文本节点——只要元素是 inline 或 inline-block（比如 、、），这个空格就会渲染成约 4px 的间隙。
为什么 font-size: 0 能消除间隙但必须重置子元素
父容器设 font-size: 0 并不是“删掉”空格，而是让那个由换行生成的空白文本节点失去宽度（因为空格宽度 = 当前 font-size × 字体度量）。但副作用是：所有继承该字号的子元素文字会消失或极小。
- 必须对每个含文本的子元素显式设置
font-size，例如button { font-size: 14px; } -
input[type="number"]的 placeholder 文字也受此影响，需单独加样式如input::placeholder { font-size: 14px; } - 如果子元素里有
，它们不受font-size影响，但若父容器还设了line-height，仍可能错位
动态拼接 HTML 时怎么避免间隙
jQuery 的 .html() 或原生 element.innerHTML 插入内容时，是否产生间隙，完全取决于你传入的字符串里有没有换行或空格。
- 错误写法：
$("#box").html(`\n\n`)—— \n 会被当作文本节点保留 - 正确写法：用模板字符串连写，中间无换行、无空格：
$("#box").html(``) - 若逻辑复杂需换行，可用数组
join('')拼接：["", "", ""].join('')
静态 HTML 中保留可读性又去间隙的实用方案
把所有标签写成一行太难维护，注释隔断又丑，真正兼顾开发体验和渲染效果的做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给容器加类名（如
.inline-group），统一设font-size: 0 - 子元素用
> *通配重置字体，并加vertical-align: middle防基线错位 - 不依赖全局重置，避免污染富文本区域（比如 CMS 输出的
里突然没字） - 如果项目已用 Vue/React，优先在组件层用
display: flex+gap替代 inline-block 布局——它天然忽略源码空白，且gap可控、可响应
最常被忽略的一点：间隙只在 inline formatting context 下生效。一旦你用了 float、flex、grid 或触发 BFC（如 overflow: hidden），那个换行符就不再参与布局计算。所以别死磕 font-size: 0，先确认当前布局模式是否真的需要它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
