静态HTML模块间空隙源于浏览器将换行/空格解析为文本节点，当元素为inline或inline-block时，该节点渲染为约4px间隙；根本原因是HTML解析规则而非CSS错误。

为什么静态 HTML 模块间会有空格间隙

因为浏览器把标签间的换行、缩进、空格解析成一个文本节点，而当这些模块是 display: inline 或 inline-block（比如 、、）时，这个文本节点就会渲染为约 4px 的可见间隙——和字体大小直接相关，不是 CSS “没写好”，是 HTML 解析规则本身。

HTML 源码紧密拼接的实操写法

最彻底、零样式依赖的方式，就是让 HTML 字符串里不出现任何无关空白：

• 所有模块标签写在同一行，中间不留空格、不换行：
  A
  B
  C
• 用 ES6 模板字符串动态插入时，避免回车：$("#container").html(`
  A
  B
  C
  `)
• 若需可读性，用 HTML 注释“吃掉”换行：
  A
  B
  C
• 注意：JS 拼接时别用 += 多行字符串，容易带入不可见换行符

font-size: 0 是什么原理？哪些地方要小心

它让父容器内所有空白文本节点的“宽度”归零（因空格宽度 = 当前 font-size × 0.25 左右），从而视觉上消除间隙。但必须配套重置子元素字号，否则文字看不见：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 父容器加 font-size: 0，子元素显式设 font-size: 16px（或继承值）
• 、 等表单控件内部 placeholder 文本可能变小，建议单独给 input::placeholder 设字号
• 如果子元素用了 em 单位做 padding/margin，会受父级 font-size: 0 影响失准，优先改用 rem 或像素值

gap 属性能替代吗？什么时候不能用

gap 是目前最干净的方案，但它只在 display: flex 或 grid 容器中生效，且只控制直系子元素间距：

• 适用于导航栏、按钮组、卡片列表等明确使用 Flex/Grid 布局的场景：display: flex; gap: 12px;
• 不能用于 inline-block 混合布局，也不能穿透嵌套层级（比如子容器里的子元素不会被外层 gap 影响）
• IE 完全不支持，如需兼容，得降级用 font-size: 0 或紧密拼接

真正难处理的，是那些既要用语义化结构、又要保持源码可读性、还得兼容老浏览器的混合场景——这时候注释隔断 + 子元素 vertical-align: top 往往比强行删空格更可持续。

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