HTML空格间隙源于源码换行/空格被解析为“#text”节点，非CSS问题；inline-block元素间约4px间隙由font-size决定，margin/padding无效；推荐注释隔断或flex+gap解决。

HTML空格间隙不是CSS没写对，而是源码里的换行、空格被浏览器当作文本节点渲染了——尤其在 inline 或 inline-block 元素间，会固定产生约 4px 水平间隙，破坏对齐。

为什么 margin: 0 和 padding: 0 无效？

因为间隙根本不是 margin 或 padding，而是 HTML 解析器把两个 标签之间的换行符解析成了一个空格字符。这个空格受当前 font-size 影响，宽度≈当前字号的 0.25em（比如 font-size: 16px 时≈4px）。你清再多盒模型样式，也删不掉这个“看不见的文本节点”。

• 用开发者工具选中空白处，能看到它被高亮为“#text”节点
• display: block 可以彻底避开问题，但会丢失行内流特性（比如无法与文字同行）
• vertical-align 只能解决图片底部的垂直缝隙，对水平间隙完全无感

怎么让静态 HTML 保持可读又没间隙？

靠注释隔断是最平衡的方案：既保留缩进排版，又不让浏览器解析出空格。

DeepBI DHTML 页面生成器

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

下载

• 把标签间的换行+空格替换成 HTML 注释：
• 注释本身不渲染，也不影响 DOM 结构，兼容所有浏览器（包括 IE9+）
• 比 font-size: 0 更安全——不用额外恢复子元素字号，也不怕 placeholder 或 SVG 内文本失真
• 比连写标签（）更利于团队协作和 Git diff 阅读

Flex 布局下还用管空格吗？

不用。只要父容器设了 display: flex，子元素间的 HTML 空白符就完全失效——flex item 不参与行内格式化上下文，那些换行、空格不再生成文本节点。

• 务必搭配 gap 控制间距，而不是依赖空格或负 margin：gap: 8px 精确、响应式友好、语义清晰
• 如果需要换行，加 flex-wrap: wrap 即可，gap 在跨行时依然生效
• 注意 Safari ≤15.6 对 gap 在 flex 中的支持不完整，生产环境需加 @supports (gap: 0) 检测或 fallback

最容易被忽略的是：同一套 CSS 应用到不同来源的 HTML（手写 vs 模板引擎渲染 vs JS 动态插入）时，空白行为可能不一致——根源永远在 HTML 字符串本身，不在 CSS 文件里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！