换行符 <hr> 未按预期呈现答案

【问题标题】：line break <hr> not rendering as expected换行符 <hr> 未按预期呈现
【发布时间】：2016-05-03 06:25:31
【问题描述】：

知道为什么我的绿色上方有一条细灰线

以及如何摆脱它？

谢谢

hr {
  border-bottom: 4px solid #469551;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  height: 0;
}

【问题讨论】：

你用的是什么浏览器？我问是因为我在最新的 FireFox 上没有看到它
我会和@CupofJava 有同样的问题。 Chrome 或 Safari 中也没有行。

标签： html css

【解决方案1】：

这是因为 <hr/> 有边框（至少在 FireFox 中，因为 <hr/> 有浏览器相关的样式）。

先去掉边框。

hr {
  border: none;
  border-bottom: 4px solid #469551;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  height: 0;
}
body {
  background-color: black;
}

<br/>
<hr/>

【讨论】：

【解决方案2】：

替换这个：

border-bottom: 4px solid #469551;

通过这个：

 border: 4px solid #469551;

Here is the JSFiddle demo

【讨论】：

【解决方案3】：

移除默认的<hr>边框并使用高度和背景

hr {
  background: #469551;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  height: 4px;
  border:none;
}

例如：https://jsfiddle.net/Lc7gym88/1/

【讨论】：

【解决方案4】：

默认标签<hr> 带边框，所以你需要第一个边框为零。然后添加高度检查我的demo

【讨论】：