Html 链接到页面上的锚定标记时元素周围的间距

对于大多数人来说，这可能是一个愚蠢的问题，但似乎无法让它正常工作。我正试图跳转到页面上的锚。正如我提供的小提琴所示，它工作得很好。我创建了一个尽可能简单的示例来说明我正在努力实现的目标

当我点击链接时，它应该跳转到页面上的锚，但我似乎不知道如何在锚顶部添加间距。单击定位点时，它会跳到页面上的定位点，但定位点位于浏览器顶部。我想在锚之前留点空间，因为我的顶部有一个导航条。我试过填充顶部、边距顶部和所有东西，但都没办法解决。这里有一张图片来解释我想做什么

单击定位点时，它会跳到页面上的定位点，但默认位于浏览器顶部

我想要的是当我单击锚定标记时有间距

我试过了

margin-top:

及

希望我解释得足够好。我需要间距的原因是因为我有一个固定的顶部栏，它覆盖了我在页面上链接到的标题，所以我需要空间来弥补这一点，似乎没有任何效果

我链接到的标题文本位于顶部栏下方

当我点击锚定时，我需要间隔，这样我的顶部栏就不会覆盖文本

为

#锚定

创建css，并在那里应用

填充顶部

。例如：

#anchor{ padding-top: 30px }

---

以h3元素为目标，并向其添加线条高度。也许不是最优雅的解决方案，但它是有效的

HTML:

#anchor{ padding-top: 30px }

<nav>
<ul>
<li class=""><a href="#anchor">Test</a></li>
</ul>
</nav>
<div class="spacecontainer">

</div>

<h3 id="anchor">
<a id="">TEXT</a>
</h3>
<div class="spacecontainer">

</div>
<div class="spacecontainer">
</div>

    .spacecontainer {
  width:100%;
  height:500px;
}

h3 {
 line-height:50px;
}