如何缩小hr元素与上方元素的间距？已尝试margin-top:0无效

浏览器默认会给<hr>和上方的块级元素（比如p、h标签）设置内外边距，两者叠加起来就是你看到的大间距。你试过margin-top:0没用，大概率是上方元素的margin-bottom在起作用，试试下面的方案：

1. 同时调整上方元素和hr的外边距 #

找到hr上方的元素（比如段落或标题），把它的下边距清零，再重置hr的上边距：

/* 替换成你实际的上方元素选择器，比如p、h1等 */
p {
  margin-bottom: 0;
}

hr.hrabt {
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
  margin-top: 0;
  /* 按需保留下边距，避免和下方元素贴得太近 */
  margin-bottom: 1em;
}

2. 用负外边距强制拉近 #

如果上面的方法没效果，可能是有更高优先级的样式覆盖，直接给hr加负的上边距：

hr.hrabt {
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
  /* 数值按需调整，负数越大拉得越近 */
  margin-top: -12px;
}

3. 用开发者工具排查根源 #

按F12打开浏览器调试工具，选中hr和上方元素，查看「计算样式」面板，确认是哪个元素的margin/padding在贡献间距，精准修改对应的样式，比盲目尝试更高效。

调整前效果：

调整后目标效果：

内容的提问来源于stack exchange，提问作者upper-productions