如何调整<hr>标签与上下<p>元素之间的间距？

算力阿峰

2026-5-26

嘿，这个问题我之前也碰到过！其实核心原因是浏览器给<hr>加了一堆默认样式，导致你设置的margin或者行高没起到预期效果。咱们一步步来解决：

第一步：重置`<hr>`的默认样式

不同浏览器对<hr>的默认样式差异很大——有的带border，有的默认有margin，甚至把height设为0靠border来显示线条。所以首先得把这些默认样式清掉，才能精准控制间距：

hr {
  /* 清除默认外边距 */
  margin: 0;
  /* 清除内边距 */
  padding: 0;
  /* 去掉默认的边框（很多浏览器用border来做水平线） */
  border: none;
  /* 设置水平线的实际高度 */
  height: 1px;
  /* 给水平线加颜色 */
  background-color: #999;
}

第二步：自定义间距

现在<hr>的样式干净了，你可以通过两种方式调整它和上下<p>的间距：

方法1：直接给`<hr>`加margin

比如想让<hr>和上下段落各保持10px的间距：

hr {
  /* 上面的重置代码 */
  margin: 10px 0;
}

方法2：调整`<p>`的外边距

如果你需要更精细控制段落本身的间距，也可以给上下段落分别设置margin：

/* 先清除p的默认外边距 */
p {
  margin: 0;
}
/* 上面的段落底部留间距 */
p:first-of-type {
  margin-bottom: 10px;
}
/* 下面的段落顶部留间距 */
p:last-of-type {
  margin-top: 10px;
}