标签必须显式包裹逻辑完整段落，因html解析器会压缩连续空白符；段距用margin控制，首行缩进用text-indent: 2em，禁用模拟分段或内嵌块级元素。
直接用 <p></p> 包裹每段逻辑完整的文本，再配 margin 控制段距、text-indent 控制首行缩进，是最稳、最语义清晰、兼容性最好的做法。别靠回车、空格或多个 <br> 模拟分段。
为什么 <p></p> 不能靠编辑器回车自动分段
HTML 解析器会把连续空白符（包括换行、制表、多个空格）全部压缩成一个空格。你在代码里敲十次回车，浏览器照样显示为一行文字。这不是 bug，是规范行为。
- 错误写法：
<p>第一段</p> <p>第二段</p>写在同一行，或中间加一堆回车——都有效，但回车本身不生效 - 正确写法：必须显式用
<p></p>开闭标签包裹每一段，比如：<p>这是第一段独立观点</p> <p>这是第二段事实陈述</p> - 危险信号：如果看到连续 3 个以上
<br>，基本说明结构没理清，该拆成<p></p>或改用列表
margin 是控制段落间距的唯一正解
<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 默认自带约 1em 的上下外边距，这就是你看到的“自然段距”。要调整它，只动 margin，其他属性都会引入副作用。
- 统一所有段落间距：
p { margin: 0.8em 0; } - 去掉首段顶边距、末段底边距：
.content p:first-child { margin-top: 0; } .content p:last-child { margin-bottom: 0; } - 千万别只设
margin-top：相邻段落会叠加，造成双倍空白 - 避开陷阱：
padding是往段落内部“撑”，line-height只影响行内高度，二者都不该用来制造段距
text-indent: 2em 是中文首行缩进的黄金写法
用 2em 而不是 32px，是因为 em 相对于当前字体大小，缩进始终是“两个汉字宽”。用户放大字号、切换高 DPI 屏幕时，它依然准确；而像素值会脱节。
- 安全写法：
p { text-indent: 2em; }—— 仅作用于首行，不影响后续换行 - 别用
padding-left模拟缩进：它会让整段左移，破坏对齐基准，且无法响应字体变化 - 若设计稿强约束必须用像素，至少同步设
font-size，例如：p { font-size: 16px; padding-left: 32px; }（不推荐）
哪些地方绝对不能塞进 <p></p> 里
HTML 规范明确禁止块级元素嵌套在 <p></p> 中。浏览器遇到 <p></p>
<div>xxx</div>
<p></p>
<div>xxx</div>
<p></p>，结构断裂、样式错位、屏幕阅读器误读。
- 合法子元素：只有行内元素，比如
<strong></strong>、<em></em>、<code>、<a></a> - 要包裹多段内容？用
<div class="section"> 或 <code><section></section>包住多个<p></p>，而不是反向操作 - 地址、作者信息、诗歌等非自然语言段落？该用
<address></address>、<pre class="brush:php;toolbar:false;"></pre>或纯<div>，硬塞 <code><p></p>会污染语义真正难的不是怎么写
<p></p>，而是判断哪一段文字值得成为一个独立段落——它得承载一个完整意思，而不是为了视觉换行凑数。这点一旦模糊，后面所有 CSS 调整都会变成补丁叠补丁。
