DevTools中勾选“Show user agent shadow DOM”并关闭“Hide empty text nodes”，空白文本节点会以#text形式显式列出，引号内为空或仅含\n即为空格节点；button、input、img等inline元素，table（border-collapse: separate），及含外溢margin的header/nav最敏感；font-size: 0可临时验证但不可上线；flex+gap是推荐解法，需确保子元素为flex item。
DevTools里怎么一眼识别空格节点？
浏览器开发者工具默认会把纯空白文本节点（换行、缩进、空格）折叠显示，容易误判为“没空格”。真想确认有没有，得在 Elements 面板中右键目标父容器 → 选择 Break on > subtree modifications，再手动删掉疑似位置的换行，看 DOM 是否重排；更直接的是勾选 DevTools 设置里的 Settings > Preferences > Elements > Show user agent shadow DOM 并关闭“Hide empty text nodes”——这时所有空白文本节点会以 #text 形式显式列出，带引号内容为空或仅含 \n 就是罪魁祸首。
哪些元素对空格间隙最敏感？
不是所有换行都会出问题，关键看父容器是否触发了行内格式化上下文（IFC）。以下三类最典型：
-
<button></button>、<input>、<img alt="HTML空格造成的微小间隙怎么看？精准检查步骤" >这些默认display: inline或inline-block的元素，相邻写法中只要源码有换行，就大概率生成 4px 左右间隙 <table> 在 <code>border-collapse: separate模式下，单元格间空白会被解析为cellspacing行为，哪怕设了cellspacing="0"也可能残留 1–2px-
<header></header>和<nav></nav>等块级元素之间看似无碍，但若内部嵌了未重置margin的<ul></ul>，其margin-top会外溢，造成视觉“空隙” - 子元素文字会变看不见，必须单独恢复
font-size，比如button { font-size: 14px; } - 若子元素用了
em或rem单位，继承链会被打断，导致尺寸错乱 - 对
line-height、vertical-align等依赖字体度量的属性也会产生连锁影响 - 子元素写了
float: left或position: absolute，会脱离 flex 流，gap对它无效 - 父容器是
inline-flex，而外层还有文字，此时子元素仍参与行内布局，gap可能被 line-height 干扰 -
gap不作用于伪元素（::before/::after），若靠它们撑开间距，得换思路
font-size: 0 能临时验证，但别直接上线
给父容器加 font-size: 0 是最快判断空格是否作祟的方法：如果间隙消失，基本可锁定是空白文本节点渲染所致。但这个方案有硬伤：
所以它只适合调试，上线前该删掉。
立即学习“前端免费学习笔记（深入）”；
gap 替代 margin 时要注意 flex 容器的隐式行为
用 display: flex + gap 是目前最干净的解法，但它有个隐藏前提：子元素必须是 flex item。常见踩坑点：
真正要根治，得从源头控制 HTML 字符串拼接方式或静态结构——动态插入时用模板字符串连写，静态页面用 flex + gap，别留任何侥幸心理去“凑空格”。
