为页面内的链接添加边距答案

【问题标题】：adding margin to link within page为页面内的链接添加边距
【发布时间】：2021-04-28 05:57:47
【问题描述】：

页面中的链接将您的内容滚动到浏览器窗口的顶部。有什么办法可以增加边距吗？我将使用一些 javascript 来指导滚动，但希望有一个可行的后备。

所以，简而言之，我可以在 CSS 中添加一个边距，当它是一个页面链接时，它会在浏览器窗口的顶部和一个部分之间添加一些空间。

HTML：

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section">
    <a name="test"></a>
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

【问题讨论】：

标签： html css scroll anchor margin

【解决方案1】：

进行页内链接的首选方法是使用 id 而不是 name 属性。

<a href="#test">

应该匹配：

<div id="test">

从这里您可以轻松地将填充添加到#test div 的顶部，这将是您的滚动位置。

示例：http://tinkerbin.com/EvV7byy9

【讨论】：

tinkerbin.com 已不复存在；也许链接可以重写为tinkerbin.heroku.com，但似乎也不能正常工作。
完美的例子，为什么所需的代码应该只保留在 SO 中。

【解决方案2】：

嗯，我会将每个部分中的锚点设置为绝对定位，从该部分的开头向下大约 10 像素。它看起来像这样：

.section {
    position: relative;
}

.section > a {
    position: absolute;
    top: 10px;
}

这实际上是 10 像素的边距。您可以相应地调整顶部的值以更改边距/填充。我还使用了直接后代运算符 ( > )，因此段落中的链接不会受到影响。

另外，正如@NathanManousos 所述，您不应再使用 name 属性，而应使用 ID 属性。相对文档链接将滚动到任何元素的 ID，而不仅仅是链接。您可以在每个部分 DIV 上放置一个 ID，并使用填充滚动到 div 的顶部，填充将导致实际内容在 div 中进一步向下。

<style>
    .section {
        padding-top: 10px;
    }
</style>

...

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section" id="test">
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

【讨论】：

【解决方案3】：

CSS 现在支持scroll-margin-top。

这是 2021 年最好的方式。

【讨论】：