空行应通过CSS的margin或padding实现，而非；语义化段落用，仅适用于需保留格式的代码等场景。
用 <br> 加空行？别这么干
HTML 里没有“空行”这个语义概念，<br> 只是强制换行，不是添加空白段落。滥用它会让结构松散、可访问性差，屏幕阅读器会把它读作“换行”，而不是停顿或分隔。
-
<br>适合在地址、诗行、表单标签旁等**需要视觉换行但内容仍属同一逻辑块**的场景 - 想分隔段落？该用
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>—— 它自带上下外边距，语义清晰，样式可控 - 用多个
<br><br><br>模拟空行？会导致响应式布局错乱，移动端可能撑开意外高度
真正加空行：用 margin 或 padding
所谓“空行”，本质是元素间的垂直间距。靠 CSS 控制最可靠，也符合现代 HTML 的语义分工。
- 给上一个
<p></p>加margin-bottom: 1em;，或下一个加margin-top: 1em;—— 推荐后者，避免外边距合并（margin collapse）干扰 - 如果容器内所有子元素都要统一间隔，直接设
gap: 1rem;（需父容器为display: flex或grid） - 绝对不要用
height: 20px;或
<pre class="brush:php;toolbar:false;"></pre> 里的换行和空行是“字面意思”
<pre class="brush:php;toolbar:false;"></pre> 保留所有空白符，包括回车和空格，所以敲回车就真出空行。但它只该用于代码、日志等需保持原始格式的场景。
- 普通正文千万别套
<pre class="brush:php;toolbar:false;"></pre>来实现空行 —— 字体、行高、缩进全被重置，SEO 和可读性双崩 - 里面写
<br>是无效的，<pre class="brush:php;toolbar:false;"></pre>内部换行只认换行符 - 如果必须显示带空行的文本片段，用
<div> + <code>white-space: pre-line;更轻量、更可控遇到“空行不生效”先查这三件事
不是代码没写，而是浏览器按规则吃了你的空行。
立即学习“前端免费学习笔记（深入）”；
- CSS 中写了
margin: 0;或line-height: 1;却忘了重置其他元素的默认间距 - 父容器用了
overflow: hidden;或flex布局但没设align-items: flex-start;，导致子元素外边距被裁切 - 用了
display: inline或inline-block的元素，margin-top/bottom对它完全无效
<p></p>各设margin-bottom: 16px;，实际只显示 16px，不是 32px。 - CSS 中写了
