应优先使用语义化的<hr>标签实现水平分隔线，它天然具备分隔语义、默认渲染为浅灰实线且支持屏幕阅读器识别；若必须用空容器，则需明确设置height或background等样式以避免盒模型陷阱。
空标签元素本身不能直接构建间隔线
HTML里没有“空标签间隔线”这种东西——<hr> 是语义化分隔符，<br> 是换行控制，它们都不是“空标签+样式拼凑”的替代方案。想用 <div></div> 或 <span></span> 加 CSS 画线，本质是用块/行内元素模拟视觉分隔，不是靠标签“空”来实现的。
用 <hr> 是最直接、语义正确的做法
<hr> 天然就是水平分隔线，浏览器默认渲染为浅灰实线，无需额外 HTML 结构：
<hr>
常见调整方式包括：
- 加
class控制样式，比如<hr class="divider">，再在 CSS 中重置border、margin、height - 避免用
width或align等过时属性，改用 CSS 的max-width和margin居中 - 注意默认上下外边距（通常 1em），若嵌套在
<section>或卡片中容易撑开间距，需显式设margin: 0.5em auto - 屏幕阅读器会将其识别为“分隔”语义，比纯视觉元素更利于可访问性
用 <div> 或 <span> 模拟线要小心盒模型陷阱
如果必须用空容器（比如框架限制或动态插入），核心是明确高度/边框/定位：
立即学习“前端免费学习笔记（深入）”；
<div class="line"></div>
CSS 示例：
.line {
height: 1px;
background: #e0e0e0;
margin: 1em 0;
}
关键点：
- 别只设
border-bottom: 1px solid #ccc而不设height—— 行内元素（如<span>）可能因行高塌陷导致线不可见 - 块级空
<div>若没内容且没height或border，实际渲染高度为 0，什么也看不到 - 用
background比border更可控：避免盒模型计算误差，支持圆角、渐变等扩展 - 响应式场景下，
height: 1px在高 DPI 屏幕可能模糊，可改用transform: scaleY(0.5)缩放或box-shadow模拟细线
别用 <br> 或多个 实现间隔线
<br> 只是换行符， 是空白字符，它们都不具备分隔语义，强行组合会带来问题：
-
<br><br>产生的“空白”依赖行高，不同字体/字号下间距不一致 -
- 键盘导航时，这些节点可能被聚焦（尤其在旧浏览器），造成意外 tab 停留
- 维护时难定位——别人看到一堆
<br>不知道是排版还是 bug
真需要垂直留白，用 margin 或 padding；要视觉分隔，就选 <hr> 或带样式的空容器。混淆语义和表现，后面调试花的时间远超写那几行代码。
