br标签仅强制换行，不参与盒模型、无语义、不可样式化；正确场景限于地址/诗歌等纯内容换行；间距控制必须用margin，避免滥用导致可访问性与维护问题。
br 标签不是“加空白”，只是强制换行
<br> 的唯一作用是打断当前行流，让后续内容从下一行开始渲染。它不产生任何语义上的结构分隔，也不占用独立的布局空间（比如 <div> 那样有盒模型），更不会影响相邻元素的尺寸或位置关系。
常见错误现象包括：用多个 <br> 模拟段落间距、在响应式页面中依赖固定换行数、试图用 <br> 控制垂直对齐——这些都会导致维护困难和布局错乱。
使用场景非常有限，仅适用于纯文本内需断行的场合，例如地址、诗歌、签名栏等无法用语义化标签表达的换行需求。
- 不要在
<p>内部用<br>替代段落拆分 - 避免连续写
<br><br><br>来“空三行” - 若需控制换行后间距，必须配合 CSS（如给父容器设
line-height或后续元素设margin-top）
margin 是布局级间距，br 完全不参与盒模型计算
CSS 的 margin 属于盒模型的外边距区域，直接影响元素在文档流中的占位和与其他元素的距离。浏览器会根据 margin 值重新计算布局，还支持负值、百分比、auto 等复杂行为；而 <br> 在 DOM 中只是一个空节点，没有盒模型，没有 width/height/padding/border/margin，连 getComputedStyle() 都查不到它的尺寸。
立即学习“前端免费学习笔记（深入）”；
性能与兼容性上，margin 是现代 CSS 布局的基础手段，所有浏览器对其解析一致且高效；<br> 虽然兼容性极好，但滥用会导致 HTML 结构语义模糊，影响可访问性（屏幕阅读器可能跳过或误读）、SEO（搜索引擎难以理解内容层级）、以及后续样式扩展（比如想统一调整所有段落间距时，<br> 完全不可控）。
- 用
margin-bottom控制段落间距，而不是在每个<p>末尾塞<br> -
<br>无法响应式缩放，margin可结合em、rem或媒体查询动态调整 - Flex/Grid 布局中，
margin仍有效，<br>完全失效
什么时候真该用 br，而不是 margin
只有当换行逻辑属于内容本身、且无法被语义化标签替代时，<br> 才是合理选择。典型例子：地址块中省市区街道分行显示、歌词每行对应一个乐句、命令行输出模拟、HTML 邮件模板中为兼容老客户端做的降级处理。
注意：<br> 不等于“空行”。如果你想要的是视觉上的留白节奏（比如标题与正文之间、卡片与卡片之间），那一定是 margin 的职责范围；强行用 <br> 实现，等于把表现逻辑硬编码进 HTML 结构里。
- 地址示例：
<p>北京市<br>朝阳区<br>建国路87号</p> - 错误示例：
<h2>关于我们</h2><br><br><p>我们是一家……</p>→ 应改用h2 { margin-bottom: 1.5rem; } - 如果用了
<br>后发现需要统一调整所有类似位置的间距，说明你已经踩坑了
br 和 margin 同时存在时，谁起作用
两者完全不冲突，因为作用域不同：<br> 影响的是行内内容的换行点，margin 影响的是块级元素之间的距离。比如一个 <p> 末尾有 <br>，它只让该段落最后一行提前换行，并不会改变这个 <p> 元素自身的盒模型；而 p { margin-bottom: 24px; } 则会让整个段落盒子底部腾出 24px 空间，供下一个兄弟元素使用。
容易被忽略的一点是：在 inline 元素中（如 <span>），margin-top/margin-bottom 默认无效，此时有人会误以为“只能用 <br>”，其实正确做法是改用 vertical-align、line-height，或把该元素设为 display: inline-block 再加 margin。
-
<br>不会触发 margin collapsing（外边距合并） -
<br>不会增加父容器高度（除非父容器有line-height或font-size设置） - 调试时，用浏览器开发者工具检查元素盒模型，
<br>节点不会显示任何 margin/padding/border 区域
