为什么我的锚链接的填充不起作用？

Question

我的锚点链接在页脚中，单击它时，滚动到页面中间的锚点。问题是即使我已经为锚点添加了填充，锚点仍然与浏览器的顶部齐平。如果有意义的话，填充物不会抓住任何东西。我可以看到填充扩展到div之外，当我＆＃34; Inspect＆＃34;

时，锚包含在div中。

我错过了什么？

CSS

<style>
.anchor-link {
  margin: -90px 0 0;
  padding: 90px 0 0;
  display:block;
}
</style>

HTML

<div class="anchor">
  <h2>
    <a name="A" class="anchor-link">This is the anchor</a>
  </h2>
</div>

Answer 1

.anchor-link {
 margin: -90px 0 0;
 padding: 90px 0 0;
 display:block;
 position:relative
}

Answer 2

你知道，只要你寻求帮助，就会找到答案。我非常感谢你的贡献和帮助，伙计们。

简而言之，包围锚点的div被设置为“overflow-y：hidden;”。我将其更改为“overflow-y：visible”，并且锚点的填充现在可以正常工作。

I've included a fiddle that shows the problem area: https://jsfiddle.net/uj9bfysk/1/

Answer 3

检查你的保证金和填充......是否有理由他们似乎互相取消了？一个是90，另一个是-90。

Answer 4

试试这个：

.anchor-link {
    margin: 0;
    padding: 0;
    display: inline-block;
}

如果你想在链接的上方和下方添加填充，只需在h2标记上设置填充。

.anchor h2 {
    padding: 10px 0;
}

希望它有效..