HR标签高度在头部CSS中不生效，仅内联样式有效求助

hr标签在主流浏览器中的默认渲染逻辑依赖border属性实现线条效果，而非直接使用height属性。多数浏览器的默认样式会给hr设置类似border-top: 1px solid、height: 0的规则，仅在内部样式表中设置height:10px会被这些默认规则抵消，导致高度不生效；而内联样式优先级高于浏览器默认样式和内部样式表，所以能强制生效。

解决方法 #

方法1：重置border后设置height #

先清除hr的默认border样式，再通过height和background-color定义高度和颜色：

hr {
  border: none; /* 清除默认边框 */
  height: 10px; /* 设置高度 */
  background-color: #333; /* 设置线条颜色，可自定义 */
}

方法2：通过border控制高度 #

贴合浏览器默认渲染逻辑，用border宽度来定义高度：

hr {
  height: 0; /* 重置默认height */
  border-top: 10px solid #333; /* 用边框宽度控制高度，同时设置颜色 */
}

内容的提问来源于stack exchange，提问作者Forexbob