标题两侧空格是HTML解析时文本节点折叠导致的视觉偏斜，源于标签前后换行缩进生成的空白文本节点，影响inline/inline-block容器内对齐；解决方法包括消除换行、使用注释、父容器设font-size:0并重置h1字号，或用textContent动态插入。
标题两侧空格是文本节点折叠导致的视觉偏斜
浏览器会把 <h1></h1> 标签内首尾的空格、换行、制表符全部丢弃，但如果你在标签前后（比如换行缩进）写了空格，它们会变成相邻文本节点或影响父容器布局——尤其当标题被包裹在 inline 或 inline-block 容器里时，这些“看不见的空格”会渲染为一个字符宽度的间隙，造成左右不对称的偏斜感。
这不是 CSS margin 或 padding 问题，也不是字体渲染 bug，而是 HTML 解析阶段就已确定的空白处理行为。
检查并清理标题标签周围的换行与缩进
常见错误是写成这样：
<div class="header"> <h1>我的标题</h1> </div>
其中 <h1></h1> 前后的换行和空格会被解析为文本节点，一旦父容器是 text-align: center 或用了 flex，这些节点就会占位、拉宽、干扰对齐。
立即学习“前端免费学习笔记（深入）”；
- 把
<h1></h1>和前后标签写在同一行：<div class="header"><h1>我的标题</h1></div> - 如果必须换行排版，用注释消除空白：
<div class="header"><!--><h1>我的标题</h1><!--></div> - 避免在
<h1></h1>内部手动敲空格对齐文字，比如<h1> 我的标题</h1>（全角空格）或<h1> 我的标题</h1>—— 这类写法语义混乱，响应式下易溢出
父容器设 font-size: 0 是最稳的兜底方案
当标题嵌套在 inline-block 导航栏、卡片头或 flex 子项中，且你无法控制 HTML 源码格式（比如 CMS 输出），直接给父容器加 font-size: 0 可让所有空白文本节点“不可见”，再单独给 <h1></h1> 设回正常字号即可。
例如：
.header {
font-size: 0;
}
.header h1 {
font-size: 24px;
display: inline-block; /* 确保它不被当作纯文本流处理 */
}注意：别只设 font-size: 0 就完事，否则标题文字会消失；也别给 <h1></h1> 自己设 font-size: 0，那真就啥都看不到了。
动态插入标题时用 textContent 而非 innerHTML
JS 拼接标题后塞进 DOM，如果用 el.innerHTML = '<h1> ' + title + ' </h1>'，首尾空格仍会被 HTML 解析器折叠；而用 el.textContent = title 再手动创建元素，就能彻底绕过空白解析。
- 安全写法：
const h1 = document.createElement('h1'); h1.textContent = title; el.appendChild(h1); - 若必须用 innerHTML，先 trim 字符串：
title.trim()，再拼接 - 服务端模板（如 PHP/JSX）里也要注意模板语法是否保留了换行空格，比如 EJS 的
比更少引入空白
真正难处理的不是“怎么加空格”，而是“怎么让空格不意外出现”。标题这类语义强、视觉重的元素，应尽量剥离源码级空白干扰——它不像代码块或诗歌需要保留格式，它的对齐应该由 CSS 控制，而不是靠手敲空格去“微调”。
