<br> 本身无高度，其换行间距由父元素 line-height 决定；它不生成盒模型，不可设宽高或 display: block；语义上仅用于段内强制换行，非段落分隔，应避免滥用替代 p 或堆叠使用。
br 标签本身没有高度，它只是触发换行
<br> 是一个自封闭标签，不占内容空间，也不接受 height、margin 或 padding。它的“视觉高度”完全由所在上下文决定——准确地说，是它**父元素的 line-height 值**。
常见误解是给 <br> 加样式，比如：
<span style="height: 40px;"><br></span>
这不会让换行变高；真正起作用的是 span 的 line-height，或者更直接地，br 所在段落或容器的 line-height。
-
<br>不是块级元素，不能设宽高 - 它不生成盒模型，
display: block对它无效 - 在浮动、flex 或 grid 容器中，
<br>仍只按当前行高生效，不改变布局流
用 line-height 调整 br 的“换行间距”最可靠
想让两行文字之间空得更多？别堆 <br><br><br>，改父容器的 line-height：
立即学习“前端免费学习笔记（深入）”；
<p style="line-height: 2.5;">第一行<br>第二行<br>第三行</p>
这样所有 <br> 都会继承这个行高，视觉间距统一、语义清晰、无冗余标签。
-
line-height是无单位数值（如1.6）时，表示相对于字体大小的倍数 - 若父元素字体大小为
16px，line-height: 2→ 行高 =32px，<br>换行后自然拉开这个距离 - 避免用
px固定值（如line-height: 32px），否则嵌套时易导致行高塌陷或重叠
br 和 p 标签的换行逻辑根本不同
<p> 是语义化段落，自带上下外边距（浏览器默认 margin-top 和 margin-bottom 约 1em）；<br> 只是同一段内强制折行，不产生新段落、不带语义、不触发块级间隔。
典型误用场景：
<p>姓名：张三<br>电话：138xxxx<br>邮箱：zhang@example.com</p>
这里用 <br> 合理，因为仍是单个信息块；但如果写成：
<p>第一段内容</p><br><p>第二段内容</p>
就多余且语义混乱——<br> 在两个 <p> 之间完全无意义，纯属干扰 DOM 结构。
- 需要段落间空白 → 用
<p>+ CSS 控制margin - 需要同一段内换行（如地址、签名、诗句）→ 用
<br> - 用
<br>模拟段落间距，后期维护成本高、响应式易出错
真要微调某一处 br 的间距？用 margin 替代更可控
如果必须让某一个 <br> 比别的换得更开（比如表单中某项后多空一行），不要动 line-height，而是用包裹容器加 margin-bottom：
<p>用户名：<input type="text"></p><p style="margin-top: 24px;">密码：<input type="password"></p>
或者更精准地，在需要加空的位置插入带样式的空 <span>：
<p>标题<br><span style="display: block; margin: 16px 0;"></span>正文开始</p>
这种写法比堆 <br> 或滥用 line-height 更可预测，也方便后续用 JS 动态控制。
- 浏览器对
<br>的渲染行为高度一致，但对堆叠多个<br>的解析可能有细微差异（尤其在内联上下文中） - 移动端缩放、字体加载完成前，
line-height可能导致文字跳动；而margin是布局阶段确定的，更稳定 - 无障碍阅读器会忽略
<br>，但会读出<p>的语义；混用时注意是否影响屏幕阅读体验
