html解析时标签间换行缩进会生成真实text节点（nodetype===3），导致inline元素间出现4px间隙；textarea内容不参与空白合并，换行直接进入value；清洗需先/\s/检测再trim+replace(/\s+/g,' ')，避免误删有效空白。
HTML格式化会生成真实文本节点
浏览器解析 HTML 时，源码里的换行、缩进、空格只要出现在标签之间，就会被当作 Node.TEXT_NODE 插入 DOM 树。这不是“渲染错觉”，而是真实存在的节点——你能在开发者工具里看到它，node.nodeType === 3，node.textContent 就是那个换行符或空格。
常见错误现象：<span>A</span><span>B</span> 写成多行后，A 和 B 之间出现 4px 间隙；<textarea>\n hello</textarea> 开头多出换行；<p>第一段</p>\n<p>第二段</p> 段落间多出空行。
- 块级元素（如
<div>）之间换行，一般不影响布局，但若父容器设了 <code>font-size且子元素是inline或inline-block，间隙就暴露了 -
<textarea></textarea>是特例：它的内容不走 HTML 空白折叠规则，换行和缩进直接变成value字符串的一部分 - 服务端模板（如 Jinja、Thymeleaf）或 CMS 输出带缩进的 HTML，也会触发同样问题，和手写无关
textContent.trim() 不能直接用于 DOM 文本节点清理
对 textContent 直接调用 .trim() 会删掉整个文本节点的首尾空白，但无法解决“多个连续空白被压缩成一个空格”的语义需求，更危险的是：它会把纯空白节点（比如只含 \n\t 的节点）变成空字符串，导致 DOM 中留下“空文本节点”，某些老框架或自定义遍历逻辑可能因此报错或跳过处理。
真正安全的做法是先检测是否含有效字符，再清洗：
if (/\S/.test(node.textContent)) {
node.textContent = node.textContent.trim().replace(/\s+/g, ' ');
}
-
/\S/确保只处理含非空白字符的文本节点，跳过<div>\n </div>这类纯缩进节点 -
replace(/\s+/g, ' ')比replace(/ +/g, ' ')更可靠，覆盖 Tab、全角空格、换行符等所有空白类型 - 不要用
innerHTML替换——会丢失事件监听器、表单状态、动态插入的内容
display: inline-block 元素间隙的本质是 font-size * 0.25em
那个“莫名其妙的 4px 间隙”，不是 margin，不是 padding，是浏览器把换行符当作文本节点后，按当前 font-size 渲染出的空格宽度。计算公式就是 font-size × 0.25em（默认字体下 ≈ 4px）。所以设 margin: 0 无效，vertical-align: top 只能掩盖，不能根除。
- 最稳的现场解法：
parent { font-size: 0; }+child { font-size: 16px; }，IE8+ 全兼容 - 现代项目首选
display: flex，间隙天然消失，gap还能精确控制间距，但 IE9 及以下不支持 - HTML 注释法
<div>1</div> <!-- --><div>2</div>零 CSS 成本，但要注意注释前后不能有空格，否则空格还在 - 负 margin（如
margin-left: -4px）要随字体缩放手动调整，维护成本高，不推荐
textarea 值开头的空格必须用正则清除
textarea.value.trim() 会把用户输入的中间换行也干掉，比如 “第一行\n\n第二行” 变成 “第一行 第二行”，破坏原始格式。而开头多余空白（换行+缩进）必须用 replace(/^\s+/, '') 单独剥离。
- 正确清洗顺序：
textarea.value.replace(/^\s+/, '').replace(/\r\n/g, '\n') - 千万别在
input事件里实时执行这个操作，会导致光标跳到开头，用户输入体验崩坏 - 如果要把 textarea 内容渲染到页面（比如评论预览），记得用
white-space: pre-line或<pre class="brush:php;toolbar:false;"></pre>，否则换行会被折叠 - 服务端返回的 HTML 若含格式化
<textarea></textarea>，前端 JS 处理比改模板更可控
最易被忽略的一点：这些空白问题从来不是孤立存在的。你 fix 了一个 inline-block 间隙，可能顺带暴露了 textarea 的首行缩进；你加了 font-size: 0，又得检查 <input placeholder> 是否还能正常显示。处理时得通盘看 DOM 结构，而不是只盯一个标签。
