br标签仅用于内容本身需换行的场景，如地址、诗歌等；不可替代p标签或css margin控制段落间距，否则损害可访问性、响应式及维护性。
br 标签只做一件事：在当前位置强制换行，不产生新段落、不带语义、不参与盒模型计算。
什么时候该用 br，而不是 p 或 CSS
它只适合「换行属于内容本身」的场景，比如地址、诗歌、歌词、命令行模拟输出这类无法被语义化结构替代的纯格式需求。
- ✅ 正确：
<p>北京市海淀区中关村大街1号<br>某某大厦10层1001室<br>邮编:100080</p> - ❌ 错误：
<p>第一段内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <br><br><p>第二段内容</p>（用br模拟段落间距） - ❌ 错误：
<button>确<br>认</button>（破坏可访问性，语音合成会割裂读音）
br 不能替代 margin 控制间距
浏览器对 br 不计算尺寸，getComputedStyle() 查不到它的任何盒模型属性；而 margin 是布局级控制，支持响应式单位、负值、媒体查询，且所有浏览器解析一致。
- 段落间距必须用
margin-top/margin-bottom，不是靠堆br - 想让标题和正文之间空两行？写
h2 { margin-bottom: 2em; }，别插两个br - Flex/Grid 布局中，
br完全失效，margin依然起作用
响应式与可访问性风险
连续多个 br 在小屏上可能撑出横向滚动条，屏幕阅读器可能跳过或误读，键盘焦点也无法自然跟随视觉断行。
- 富文本编辑器导出 HTML 时，优先配置为输出
p而非br（如 TinyMCE 的forced_root_block选项） - 需要保留原始换行符语义又兼顾响应式？用
white-space: pre-line替代 -
<pre class="brush:php;toolbar:false;"></pre>内部不需要br，换行由源码中的\n决定
真正难的不是“怎么加换行”，而是判断“这个换行是不是内容的一部分”。一旦把表现逻辑塞进 HTML，后续改间距、适配暗色模式、做无障碍审计，都会卡在这行 br 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
