标签未闭合或嵌套错误、CSS重置导致默认外边距丢失、text-indent单位或继承问题、滥用替代标题/布局元素，是段落渲染异常的四大主因。
段落没换行？<p></p> 标签没闭合或嵌套错了
浏览器对 <p></p> 的容错性高，但不意味着可以乱写。常见现象是文字挤成一团、换行失效、样式错位——八成是 <p></p> 没写闭合标签，或者误把 <div>、<code><span></span> 套在 <p></p> 里（HTML 规范禁止 <p></p> 内含块级元素）。
实操建议：
- 检查每个
<p></p>是否都有对应；用编辑器的标签匹配高亮功能快速定位 - 避免这样写：
<p></p> <div>内容</div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>→ 改用<div><p>内容</p></div> - 如果用 JS 动态插入，确认字符串拼接时没漏掉
，比如innerHTML = '<p>' + text</p>就少了闭合
文字缩进/间距不对？CSS 覆盖了 <p></p> 默认样式
浏览器给 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 设了默认的上下外边距（margin-top 和 margin-bottom），但项目里常引入重置 CSS（如 normalize.css）或自定义样式，一不留神就把这个 margin 清掉了，导致段落“粘连”。
实操建议：
- 用浏览器开发者工具检查
<p></p>元素的 computed styles，重点看margin-top和margin-bottom是否为0 - 若需保留段落呼吸感，显式声明：
p { margin: 1em 0; }（比依赖浏览器默认更可靠） - 注意
margin-collapse：相邻<p></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>上重置，例如：p { font-size: 16px; text-indent: 2em; } - 避免对
<p></p>设display: inline或inline-block，text-indent在这些模式下无效
语义正确但渲染异常？<p></p> 用在不该用的地方
<p></p> 表示一个“段落”，本质是独立、完整的思想单元。但很多人把它当“换行标签”或“样式占位符”滥用，比如塞标题、按钮、表格，甚至空标签占位——这会导致语义混乱、SEO 折损、屏幕阅读器误读。
实操建议：
- 标题用
<h1></h1>–<h6></h6>，列表用<ul></ul>/<ol></ol>，表格用<table>，别硬塞进 <code><p></p> - 纯视觉换行需求，用
<br>（仅限诗歌、地址等有明确换行意义的场景）；布局分隔优先用margin或gap - 空
<p></p>是典型坏习惯，既无语义又干扰可访问性；需要留白就调 CSS，别靠空标签撑
真正难的不是写对 <p></p>，而是判断什么时候不该用它。语义和渲染的冲突，往往藏在“看起来能用”和“应该这么用”的缝隙里。
