本身无高度，其换行间距由父元素 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></p> 是语义化段落，自带上下外边距（浏览器默认 margin-top 和 margin-bottom 约 1em）；<br> 只是同一段内强制折行，不产生新段落、不带语义、不触发块级间隔。
典型误用场景：
<p>姓名：张三<br>电话：138xxxx<br>邮箱：zhang@example.com</p>
这里用 <br> 合理，因为仍是单个信息块；但如果写成：
<p>第一段内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><br><p>第二段内容</p>
就多余且语义混乱——<br> 在两个 <p></p> 之间完全无意义，纯属干扰 DOM 结构。
- 需要段落间空白 → 用
<p></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></span>：
<p>标题<br><span style="display: block; margin: 16px 0;"></span>正文开始</p>
这种写法比堆 <br> 或滥用 line-height 更可预测，也方便后续用 JS 动态控制。
- 浏览器对
<br>的渲染行为高度一致，但对堆叠多个<br>的解析可能有细微差异（尤其在内联上下文中） - 移动端缩放、字体加载完成前，
line-height可能导致文字跳动；而margin是布局阶段确定的，更稳定 - 无障碍阅读器会忽略
<br>，但会读出<p></p>的语义；混用时注意是否影响屏幕阅读体验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
