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

Question

对于大多数人来说，这可能是一个愚蠢的问题，但似乎无法让它正常运作。我试图跳到页面上的锚点。这工作正常，如我提供的小提琴所示。我创建了一个简单的可能的样本，我想要完成的任务。

当我点击链接时，它应该跳转到页面上的锚点，但我似乎无法弄清楚如何在锚点顶部添加间距。单击锚点时，它会跳转到页面上的锚点，但锚点位于浏览器的顶部。我想在锚之前留出空间，因为我在顶部有一个棒状导航栏。我已经尝试了填充顶部，边缘顶部，一切都无法解决问题。下面是一张图片来解释我想要做什么。

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

我想要的是当我点击锚标签时有间距。

https://jsfiddle.net/yao25Lxc/3/

我已经尝试了

margin-top:

和

padding-top:

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

我链接的标题文字位于顶栏下方

当我点击锚点时我需要间距，所以我的顶栏不会覆盖文字。

Answer 1

定位h3元素并为其添加行高。也许不是最优雅的解决方案，但它确实有效。

HTML：

<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>

CSS：

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

h3 {
 line-height:50px;
}

https://jsfiddle.net/8awx6hy4/

Answer 2

为#anchor创建一个css并在那里应用padding-top。例如：

#anchor{ padding-top: 30px }

https://jsfiddle.net/bonez0607/59eqnqyp/