静态HTML模块间空隙源于浏览器将换行/空格解析为文本节点，当元素为inline或inline-block时，该节点渲染为约4px间隙；根本原因是HTML解析规则而非CSS错误。
为什么静态 HTML 模块间会有空格间隙
因为浏览器把标签间的换行、缩进、空格解析成一个文本节点，而当这些模块是 display: inline 或 inline-block（比如 <button></button>、<img alt="HTML模块之间空格间隙怎么去？紧密拼接方法" >、<span></span>）时，这个文本节点就会渲染为约 4px 的可见间隙——和字体大小直接相关，不是 CSS “没写好”，是 HTML 解析规则本身。
HTML 源码紧密拼接的实操写法
最彻底、零样式依赖的方式，就是让 HTML 字符串里不出现任何无关空白：
- 所有模块标签写在同一行，中间不留空格、不换行：
<div>A</div> <div>B</div> <div>C</div> - 用 ES6 模板字符串动态插入时，避免回车：
$("#container").html(`<div>A</div> <div>B</div> <div>C</div>`) - 若需可读性，用 HTML 注释“吃掉”换行：
<div>A</div> <!-- --><div>B</div> <!-- --><div>C</div> - 注意：JS 拼接时别用
+=多行字符串，容易带入不可见换行符
font-size: 0 是什么原理？哪些地方要小心
它让父容器内所有空白文本节点的“宽度”归零（因空格宽度 = 当前 font-size × 0.25 左右），从而视觉上消除间隙。但必须配套重置子元素字号，否则文字看不见：
- 父容器加
font-size: 0，子元素显式设font-size: 16px（或继承值） -
<input>、<select></select>等表单控件内部 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 往往比强行删空格更可持续。
