html - <hr>线标签之间的间距调整

我在<p>元素之间有两个<hr>元素。

我想调整线条之间的间距，但是我不确定该怎么做。这是因为：


行高不能为负
margin-top / margin-bottom在这里也不起作用。


这似乎是一个非常简单的任务，但我不确定如何正确执行。

这是我要完成的工作的图片：



如何调整顶部和底部<hr>的<p>之间的间距？

https://jsfiddle.net/pLput9w3/

<p>Hello</p>
<hr>
<p>Hello from the other side</p>

最佳答案

就像建议的注释一样，如果您不想更改p元素的边距，则可以尝试使用负边距，在这种情况下应该可以正常工作。但是，对于p中的更改，需要对此进行更改

hr {
  margin-top: -1em;
  margin-bottom: -1em;
}

<p>Hello</p>
<hr>
<p>Hello from the other side</p>

另一种方法是删除p和hr的默认边距

p, hr {
  margin-top: 0;
  margin-bottom: 0;
}

<p>Hello</p>
<hr>
<p>Hello from the other side</p>

另外，您可以简单地删除hr，而在第二个border上使用p

p {
  margin: 0;
}


.top-border {
  border-top: 1px solid black;
}

<p>Hello</p>
<p class="top-border">Hello from the other side</p>