<hr />行标记

Question

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

我想调整线之间的空间，但是我不知道该怎么做。这是因为：

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

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

这是我想要完成的图片：

如何在顶部和底部<hr>的{​​{1}}之间调整这些空格？

https://jsfiddle.net/pLput9w3/

<p>

Answer 1

就像建议的评论一样，如果您不想更改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>

Answer 2

尝试调整hr元素和p元素的边距。

hr {
  margin-bottom: 2px;
}
p {
  margin-top: 2px;
}