如何摆脱 <hr> 垂直间距？

Question

TLDR：点击底部的图片，我的菜鸟问题立即显现出来。

---

大家好

我有两个 <div> 元素，我想用 <hr class="separator"> 元素分隔它们。

<hr class="separator"> 元素的 CSS 代码如下：

hr.separator {
边框顶部：1px 纯黑色；
上边距：70px;
边距底部：0;
填充：0;
}

底部<div class="brown">元素的CSS代码如下：

div.brown{
边距顶部：0；
上边距：70px;
背景颜色：#ce9771;
}

在 HTML 代码中，这些元素是这样设置的：

<div> 上 div \<div>
<hr>
<div> 下 div \<div>

不过，我在它们之间有一个垂直的空白（大约 3 像素）。我已经尝试将所有边距和填充设置为“0”，甚至尝试将<hr>作为每个<div>的孩子并使用位置属性（这总是使<hr>消失） .... 任何人都可以在这里帮助新手吗？

Answer 1

与：

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

您只需设置/更改top 边框，但hr 也可以有其他边框。

所以先去掉所有带有border: none;的边框，然后设置上边框：

hr.separator {
    border: none;
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}

<hr class="separator">
<div class="brown">

</div>

当您不知道为什么看起来有问题时，您应该在浏览器的开发人员工具中检查应用于该元素的样式的计算属性。