html段落标签不改变空格处理逻辑，连续空格、制表符、换行符会被合并为单个空格；需用 、或css white-space属性保留空格。
HTML段落标签（<p></p>）本身不改变空格处理逻辑，它遵循浏览器默认的空白字符渲染规则：连续空格、制表符、换行符一律被合并为单个空格，首尾空格也被忽略。
段落内空格会被自动压缩
在 <p></p> 标签中直接敲多个空格键，比如：<p>Hello World</p> —— 这样写才显示三个空格
而：<p>Hello World</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> —— 实际只显示一个空格
这是因为 HTML 解析器将普通 ASCII 空格（U+0020）视为空白符，在渲染时执行“空白折叠”（white space collapsing）。
想保留多个空格，得用特殊方式
-
用 替代空格：每个
-
用
<pre class="brush:php;toolbar:false;"></pre>包裹内容：它让段落内所有空格、缩进、换行原样保留，但会默认使用等宽字体，语义上表示“预格式化文本” -
用 CSS 的
white-space：比如<p style="white-space: pre-wrap">Hello World</p>，既保留空格又允许自动换行 - 中文排版可用全角空格（ ）或半角空格（ ）：它们是独立 Unicode 字符，不受折叠影响，宽度更稳定，适合首行缩进或对齐
注意段落标签自身的空白行为
<p></p> 是块级元素，浏览器会自动给它加上下外边距（margin），但这和内部空格无关。段落之间的空行（即两个 <p></p> 之间换行）同样被忽略——不是因为 <p></p> 特殊，而是 HTML 整体对源码空白的通用处理规则。
避免常见误区
不要靠反复敲空格键来“对齐文字”或“留白”，那在页面上完全无效；
也不要混用 和普通空格，容易导致渲染不一致；text-indent 只影响首行缩进，不能替代段中多空格需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
