html - 行标签之间的间距调整

Question

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

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

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

这似乎是一项非常简单的任务，但我不确定如何正确地完成它。

这是一张我想要完成的图片:

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

https://jsfiddle.net/pLput9w3/

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

Answer 1

就像建议的评论一样，如果您不想更改 p 元素的边距，您可以尝试在这种情况下应该可以正常工作的负边距。但是，这需要根据 p though

的更改进行更改

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 并在第二个 p

上使用 border

p {
  margin: 0;
}


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

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