hr 默认样式在现代页面中易出错，因浏览器预设的 margin、border 和 height 会导致留白失控、线条模糊或溢出；应重置为 background-color + height，并用 class 统一控制。
hr 标签本身就能插入分割线，但直接写 <hr> 很可能出错——不是线没出来，就是位置撑开、颜色发虚、高 DPR 屏幕上糊成一片。
为什么 hr 默认样式在现代页面里总“不对劲”
浏览器给 hr 预设了 margin（上下各 0.39em）、border（3D 阴影边框）、height（不统一），这些在 Flex/Grid 布局或卡片组件里极易导致留白失控、线条粗细不一、甚至被父容器 overflow 隐藏。
常见错误现象：
- 写了
<hr>却看不见线——其实是被默认 margin 撑到视口外，或 background 被 border 覆盖 - 线在 iPhone 上发虚、变粗——高 DPR 下 border 渲染失真，
border: 1px solid #ccc实际是 2px 物理像素 - 用
width: 100%强制拉满，结果在max-width: 600px的卡片里溢出
怎么写 hr 才能真正可控
核心原则：清空默认，用 background-color + height 替代 border，所有样式走 class 控制。
- HTML 中只写语义干净的
<hr class="section-divider">，绝不加内联 style - CSS 中重置关键属性：
hr.section-divider { margin: 0.75em 0; border: none; height: 1px; background-color: #e0e0e0; } - 若需适配高 DPR 屏幕，用
background-image: linear-gradient(to right, #e0e0e0, #e0e0e0)替代background-color，避免模糊 - 要加间距？调
margin，别碰padding——hr是替换元素，padding无效
hr 和 div+border 到底该选哪个
选 hr 的唯一强理由：它明确表示「主题中断」。屏幕阅读器会读作 “section break”，SEO 工具能识别内容结构变化。
- 文章章节切换、文档大纲跳转点、富文本中不同话题段落之间 → 必用
hr - 卡片底部装饰线、表单字段组之间的视觉分隔、按钮列表项之间 → 用
<div class="divider-bottom"></div>+border-bottom更稳妥 - 千万别把
hr塞进contenteditable富文本编辑器后直接输出——多数编辑器会套无意义内联 style，必须后处理替换为带 class 的干净hr
最易被忽略的一点：哪怕你只用了一次 hr，也得在全局 CSS 里统一重置它的 margin 和 border。否则某天改了布局，它突然在某个卡片里多撑出 20px 空白，而你根本想不起这行代码在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
