Why won't the padding of my anchor link work?

Question

My anchor link is in the footer, and when it's clicked, scrolls to an anchor in the middle of the page. The problem is that even though I've added padding to the anchor, the anchor is still flush with the top of the browser. The padding just isn't gripping anything, if that makes sense. I can see the padding expand beyond the div the anchor is contained in when I "Inspect".

What am I missing?

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

You know, it happens that as soon as you seek out help, you find the answer. I really do appreciate your contribution and help though, guys.

In short, the div that surrounded the anchor was set to "overflow-y:hidden;". I changed this to "overflow-y:visible" and the padding for the anchor works now.

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

Answer 3

Check your margin and padding... is there a reason they seemingly cancel each other out? One is 90, the other is -90.

Answer 4

Try this one :

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

If you want to add padding above and below link just set padding on h2 tag.

.anchor h2 {
    padding: 10px 0;
}

Hope it works..