应使用<p>标签语义化分段，配合margin-block、line-height和text-indent控制排版；禁用<br>模拟分段，因其无语义、损害可访问性与SEO，且导致移动端行高不稳定。
直接用 <p> 标签分段，配合 margin-block、line-height 和 text-indent 控制呼吸感与缩进，比堆 <br> 或嵌套 <div> 更可靠——后者会破坏语义、干扰屏幕阅读器，还可能被浏览器自动闭合导致结构错乱。
为什么不能靠 <br> 换行来“分段”
一段 400 字全塞在单个 <p> 里，只靠多个 <br> 拆行，等于告诉浏览器：“这是一整块不可分割的内容”。结果是：
- 屏幕阅读器连续朗读，用户无法跳过无关段落
- 搜索引擎难以提取关键信息点，SEO 权重下降
- 移动端默认 line-height 不稳定，文字挤成一团
-
<br>是行内换行，不是语义分隔符；它不该承担段落逻辑职责
<p> 的正确切分粒度
每个 <p> 应对应一个完整语义单元，比如：
- 一个问题描述（“为什么点击按钮没反应？”）
- 一个解决步骤（“检查
onclick是否绑定到正确元素”） - 一个注意事项（“注意：Vue 中需用
@click，而非原生onclick”）
避免把“背景介绍 + 操作步骤 + 报错截图说明”全塞进一个 <p>。段落长度建议控制在 3–5 行（PC 端约 60–80 字），过长会降低扫视效率。
立即学习“前端免费学习笔记（深入）”；
CSS 必设的三项排版控制
仅依赖 <p> 默认 margin 很危险——CSS 重置、框架样式或浏览器差异都可能导致段间距消失。必须显式声明：
-
margin-block: 1.2em;：统一上下间距，比单独设margin-top/margin-bottom更健壮 -
line-height: 1.6;：无单位数值，随字体大小缩放，响应式友好 -
text-indent: 2em;：首行缩进，注意它基于父级font-size，不随子元素<strong>变化而偏移
禁用 padding 替代段间距——那是往段落“肚子”里塞墙，不是在段落之间留路。
超长无空格内容（如 JSON、路径、base64）怎么不撑破容器
这类文本默认不换行，<p> 会直接横向溢出。解决方案要按场景区分：
- 若需保留原始格式（如代码片段）：改用
<pre><code>组合，并加white-space: pre-wrap; - 若只是普通文本中混有长 token（如
/api/v1/users/1234567890abcdef）：对包裹它的<p>设overflow-wrap: break-word;（现代写法）或兼容旧浏览器的word-break: break-word; - 绝对不要全局给
p设word-break: break-all;——它会把 “JavaScript” 拆成 “Java-Script”，损害可读性
真正难处理的，是语义边界模糊的长文本：比如技术文档里夹着命令、返回值、错误日志三合一的段落。这时候得人工拆解，而不是靠 CSS 强撑——排版再好，也救不了结构混乱的内容。
