在页面中链接到锚点标签时，元素周围的间距
在页面中链接到锚点标签时，元素周围的间距
对于大多数人来说，可能是一个愚蠢的问题，但似乎无法正确地解决。我正在尝试跳转到页面上的锚点。这在我提供的fiddle中正常工作。我创建了一个尽可能简单的示例来说明我想要实现的目标。
当我点击链接时，它应该跳转到页面上的锚点，但我似乎无法弄清楚如何在锚点之上添加间距。当点击锚点时，它会跳转到页面上的锚点，但锚点位于浏览器的顶部。我想在锚点之前添加间距，因为我在顶部有一个固定的导航栏。我尝试过使用padding-top、margin-top等，但无法解决。下面的图片可以解释我想要做的事情。
当点击锚点时，它会跳转到页面上的锚点，但默认情况下位于浏览器的顶部。
[a href="https://i.stack.imgur.com/XJD4m.png" rel="nofollow noreferrer"][img alt="enter image description here" src="https://i.stack.imgur.com/XJD4m.png"/][/a]
我想要的是，当我点击锚点时，会有间距。
[a href="https://i.stack.imgur.com/u1qUC.png" rel="nofollow noreferrer"][img alt="enter image description here" src="https://i.stack.imgur.com/u1qUC.png"/][/a]
[a href="https://jsfiddle.net/yao25Lxc/3/" rel="nofollow noreferrer"]https://jsfiddle.net/yao25Lxc/3/[/a]
我尝试过使用
margin-top:
和
padding-top:
希望我解释得足够清楚。我需要间距的原因是因为我有一个固定的顶部栏，它覆盖了我在页面上链接到的标题，所以我需要空间来弥补，但似乎没有任何效果。
[a href="https://i.stack.imgur.com/lWCcT.png" rel="nofollow noreferrer"][img alt="Title text that I linked to is underneath the top bar" src="https://i.stack.imgur.com/lWCcT.png"/][/a]
我需要点击锚点时有间距，这样我的顶部栏就不会遮挡文本。
[a href="https://i.stack.imgur.com/FI0nm.png" rel="nofollow noreferrer"][img alt="enter image description here" src="https://i.stack.imgur.com/FI0nm.png"/][/a]
当在页面上链接到锚点标签时，元素周围的间距问题出现的原因是因为没有为锚点创建一个CSS，并在其中应用padding-top。解决方法是创建一个CSS选择器为#anchor，然后在其中应用padding-top。例如：#anchor{ padding-top: 30px }。以下是一个示例：https://jsfiddle.net/bonez0607/59eqnqyp/。
在上述代码中，问题是当链接到页面上的锚点标签时，围绕元素的间距出现了问题。问题的原因是h3元素的行高没有设置正确，导致链接到锚点时间距不正确。
解决该问题的方法是将目标h3元素进行定位，并添加正确的行高。下面是修复问题的代码示例：
HTML:
TEXT
CSS:
.spacecontainer {
width: 100%;
height: 500px;
}
h3 {
position: relative;
top: -50px; /* 调整h3元素的位置，使其与链接到的锚点对齐 */
line-height: 50px; /* 设置正确的行高 */
}
修复后的代码可以在以下链接中查看：
[https://jsfiddle.net/8awx6hy4/](https://jsfiddle.net/8awx6hy4/)
通过对目标h3元素进行定位并设置正确的行高，可以解决链接到锚点时围绕元素的间距问题。