如何消除<hr>垂直间距？

Question

点击下面的图片，我的菜鸟问题就会立即显现出来。

嗨，大家好

我有两个<div>元素，我想将它们与一个<hr class="separator">元素分开。

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

hr.separator {

粉末冶金边框顶:1 1px实心黑；

最高利润:70 ；

最高利润-底差: 0；

粉末冶金填料: 0；

}

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

div.brown{

最高利润: 0；

成品率最高:70 ；

暗色暗色：#ce9771；

}

在HTML代码中，这些元素设置如下：

<div>上div \<div>

<hr>

<div>底部div \<div>

不过，我在它们之间有一个垂直空格(约3px)。我已经尝试过将所有的边距和填充设置为"0"，甚至还试图使<hr>成为每个<div>的子级，并使用<hr>属性(这总是使<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>

​

当您不知道为什么会出现问题时，您应该在浏览器的developer工具中检查应用于该元素的样式的计算属性。