html - 为什么 <hr/> 有一个奇怪的黑色顶部边框？

Question

我放了一个<hr>在 angular flex div 和行内:

<div layout="column" flex>
      <div><hr style="border-color: green; height: 10px; background-color: green;"/></div>
// other divs
</div>

gives me the following result

我检查了那个 div 并且派生了 color: black属性，但我用 color: green 覆盖了它(到处都是color:green)但结果还是一样。为什么我的左侧和顶部有奇怪的黑色(深绿色)边框？

Answer 1

打开检查器(右键单击元素并选择检查)，您将看到用户代理样式表(浏览器应用于元素的默认样式):

hr {
    display: block;
    unicode-bidi: isolate;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

请注意浏览器应用的 border-style: inset 和 border-width: 1px 默认样式。

很多人使用某种 reset.css 或 normalize.css(谷歌这些东西)来删除许多可能不需要的默认浏览器样式。