HTML中标签间换行和空格会被解析为文本节点并渲染为约4px间隙，这是规范行为；避免方法包括注释隔断、单行紧凑写法或构建时压缩空白，而非依赖font-size:0等易出错的CSS方案。
HTML 中的换行和缩进空格，在 <button></button>、<input>、<sup></sup> 等行内或 inline-block 元素之间，会被浏览器当作一个真实空格渲染出来——这不是 bug，是规范行为；避免的关键不是“删掉所有空格”，而是控制哪些空白该保留、哪些必须消除。
为什么静态 HTML 里写换行就出 4px 间隙？
浏览器解析 HTML 时，会把标签之间的换行符（\n）和缩进空格合并为一个文本节点，只要父容器是行内上下文（比如未设 display: block 的 <div>），这个文本节点就会被渲染成约 4px 宽的空白（具体宽度取决于当前 <code>font-size）。常见于：<button>-</button>\n<input type="number">\n<button>+</button> 这种多行写法。
- 该现象只影响
inline/inline-block元素，block元素间换行通常无视觉间隙 -
<sup></sup>、<sub></sub>、<span></span>等默认inline，紧贴文字时尤其容易暴露间隙 - 用 jQuery
.html()动态插入紧凑字符串（如`<button>-</button><input><button>+`</button>）没间隙，是因为没生成那个文本节点
HTML 源码怎么写才能既可读又无间隙？
不靠 CSS 折腾，直接从源头切断空白节点生成。有三种靠谱写法，按维护性排序：
-
单行紧凑写法：适合简单结构，例如
<div> <button>-</button><input type="number" value="1"><button>+</button> </div> -
注释隔断法：兼顾可读与语义，用
<!-- -->吞掉空白，例如<button>-</button><!-- --><input type="number"><!-- --><button>+</button> -
构建时自动压缩：用
html-minifier-terser配置collapseWhitespace: true+conservativeCollapse: false，但需小心ignoreCustomFragments，否则<pre class="brush:php;toolbar:false;"></code> 和 <code><script></code> 里的换行也会被删</li></ul><H3>font-size: 0 能不能全局用？</H3><p>可以，但得清楚代价：它让所有子元素的空白字符（包括你有意写的空格）都失去宽度，所以必须为每个子元素显式恢复 <code>font-size</code>，否则文字看不见。典型写法：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class='brush:php;toolbar:false;'>.no-gap { font-size: 0; } .no-gap > * { font-size: 16px; display: inline-block; } </pre><ul> <li>对 <code><input type="number">等表单控件兼容良好，placeholder 不受影响 - 不要只给父容器设
font-size: 0就完事，漏掉子元素字体重置会导致内容不可见 - 若子元素含嵌套文本（如按钮里有
<span>文字</span>），需确保该<span></span>也继承或设置了字体大小
哪些“修复技巧”其实更危险？
有些看似省事的做法，长期看反而增加维护成本或引入新问题：
- 用
- 依赖
white-space: nowrap：强制整行不折，可能撑破容器，损害响应式表现 - 在标签前后手动加
<span style="display:none"></span>或零宽空格：DOM 节点变多、语义混乱、调试困难 - 模板引擎里写
v-pre或{}紧贴插值却不处理源码空白：只治标，下次别人改模板又踩坑
真正稳定的方案，是统一团队的 HTML 编写习惯 + 构建流程自动化清洗，而不是靠某次临时 CSS hack 去掩盖结构性问题。
