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

Question

知道为什么我的绿色

---

上面有一条细灰线，以及如何摆脱它？

由于

https://jsfiddle.net/Lc7gym88/

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

Answer 1

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

首先删除边框。

＆＃13;

＆＃13;

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;
}

＆＃13;

<br/>
<hr/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

替换它：

border-bottom: 4px solid #469551;

由此：

 border: 4px solid #469551;

Here is the JSFiddle demo

Answer 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/

Answer 4

默认情况下标记<hr>采用边框，因此您需要第一个边框为零。然后添加高度检查我的demo