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

Question

TLDR：单击底部图片，我的新手问题立即变得明显。

大家好

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

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

hr.separator{
border-top: 1px 纯黑色;
顶部边距：70px；
底部边距：0；
填充：0；
}

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

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

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

<div>上div\<div>
<hr>
<div>底部div\<div>

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

Answer 1

有：

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

你只有 set/change 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>

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

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

How to get rid of the <hr> vertical spacing?

html

css

margin

spacing

vertical-alignment