<p>标签未闭合或嵌套错误、CSS重置导致默认外边距丢失、text-indent单位或继承问题、滥用<p>替代标题/布局元素，是段落渲染异常的四大主因。
段落没换行？<p> 标签没闭合或嵌套错了
浏览器对 <p> 的容错性高，但不意味着可以乱写。常见现象是文字挤成一团、换行失效、样式错位——八成是 <p> 没写闭合标签，或者误把 <div>、<span> 套在 <p> 里（HTML 规范禁止 <p> 内含块级元素）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查每个
<p>是否都有对应</p>；用编辑器的标签匹配高亮功能快速定位 - 避免这样写：
<p><div>内容</div></p>→ 改用<div><p>内容</p></div> - 如果用 JS 动态插入，确认字符串拼接时没漏掉
</p>，比如innerHTML = '<p>' + text就少了闭合
文字缩进/间距不对？CSS 覆盖了 <p> 默认样式
浏览器给 <p> 设了默认的上下外边距（margin-top 和 margin-bottom），但项目里常引入重置 CSS（如 normalize.css）或自定义样式，一不留神就把这个 margin 清掉了，导致段落“粘连”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查
<p>元素的 computed styles，重点看margin-top和margin-bottom是否为0 - 若需保留段落呼吸感，显式声明：
p { margin: 1em 0; }（比依赖浏览器默认更可靠） - 注意
margin-collapse：相邻<p>的上下 margin 会合并，不是 bug，是 CSS 规范行为；若要等距，改用padding或gap（配合display: flex容器）
中文段落首行缩进失效？text-indent 被重置或单位用错
中文排版习惯首行空两字，但 text-indent: 2em 经常不起作用——不是代码写错，而是父容器设置了 font-size: 0（常见于清除 inline 元素间隙的 hack），或用了 rem/px 单位却没考虑继承链。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
em：它相对当前元素的font-size，p { text-indent: 2em; }更稳 - 检查父级是否设了
font-size: 0，若有，需在<p>上重置，例如：p { font-size: 16px; text-indent: 2em; } - 避免对
<p>设display: inline或inline-block，text-indent在这些模式下无效
语义正确但渲染异常？<p> 用在不该用的地方
<p> 表示一个“段落”，本质是独立、完整的思想单元。但很多人把它当“换行标签”或“样式占位符”滥用，比如塞标题、按钮、表格，甚至空标签占位——这会导致语义混乱、SEO 折损、屏幕阅读器误读。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 标题用
<h1>–<h6>，列表用<ul>/<ol>，表格用<table>，别硬塞进<p> - 纯视觉换行需求，用
<br>（仅限诗歌、地址等有明确换行意义的场景）；布局分隔优先用margin或gap - 空
<p></p>是典型坏习惯，既无语义又干扰可访问性；需要留白就调 CSS，别靠空标签撑
真正难的不是写对 <p>，而是判断什么时候不该用它。语义和渲染的冲突，往往藏在“看起来能用”和“应该这么用”的缝隙里。
