文字排版“不规范”核心在结构错、样式飘、语义空，根源是标签误用（如滥用）、CSS控制不稳（如margin合并、text-indent失效）、编码与继承被忽略（如BOM干扰、charset位置错误）。
文字排版“不规范”通常不是字体丑，而是结构错、样式飘、语义空——浏览器默认渲染没问题，但一加 CSS 或换环境就露馅。核心问题在三个层面：标签用得不对、CSS 控得不稳、编码和继承被忽略。
用对 <p> 和语义标签，别拿 <br> 当段落
很多人看到换行就塞 <br>，结果整页都是“软断行”，既没法加 margin、也难统一缩进，更破坏屏幕阅读器逻辑。真正的段落必须用 <p> 包裹，且每个 <p> 应承载一个完整语义单元。
- 禁止：
<p>第一段</p><br><br><p>第二段</p>—— 多余<br>会干扰行高计算和 margin 合并 - 推荐：
<p>第一段</p><p>第二段</p>，再用 CSS 统一控制p { margin: 1.2em 0; line-height: 1.6; } - 标题下跟说明文字？别写成
<h2>标题</h2><span>副文本</span>，改用<h2>标题</h2><p class="subtitle">副文本</p>，保持层级可预测
text-indent 和 margin 失效的真正原因
中文首行缩进写 text-indent: 2em 没反应？大概率是父容器设了 font-size: 0（常见于 flex 清间隙 hack），或者 <p> 被设成了 display: inline。而段落“粘连”看似是 margin 消失，实则是被 normalize.css 或自定义 reset 清掉了默认值。
- 查 computed styles 里
margin-top和margin-bottom是否为0；若为 0，显式重置：p { margin: 1em 0; } -
text-indent只对块级元素生效，display: inline或inline-block下无效；若父级font-size: 0，需在<p>上补font-size: 16px - 相邻
<p>的上下 margin 会合并（collapse）——这不是 bug，是 CSS 规范；要等距间距，改用gap（配合display: flex容器）或统一用padding
编码、BOM 和 <meta charset> 位置决定排版底线
乱码、符号错位、<meta charset="UTF-8"> 不生效……八成是文件实际编码 ≠ 声明编码，或 BOM 干扰了 <head> 解析。VS Code 状态栏显示 “UTF-8 with BOM” 就危险了——BOM（EF BB BF）会卡在文件开头，导致浏览器跳过前 1024 字节查找 charset，最终 fallback 到系统默认编码（Windows 是 GBK）。
立即学习“前端免费学习笔记（深入）”；
- 验证命令（macOS/Linux）：
head -c 4 index.html | xxd，输出含ef bb bf就有 BOM - VS Code 中按
Ctrl+Shift+P→ “Change File Encoding” → 选 “Save with Encoding” → “UTF-8”（**不带 BOM**） -
<meta charset="UTF-8">必须是<head>内第一个标签，前面不能有任何字符（包括空格、注释、Zero Width Space） - 本地双击打开 HTML 文件时，HTTP 响应头失效，
<meta>是唯一救命稻草；务必确保它存在且位置绝对正确
最常被绕开的一点：所有这些排版细节，在 JS 动态插入内容时全都会失效。比如用 innerHTML = '<p>' + text 漏了闭合，或 fetch 回来一段 HTML 没经过 sanitizer 就直接插入，结构立刻崩。规范不是写完就完的事，是每次 DOM 变更都要重新校验的事。
