anchor tag is larger than element it holds

Question

On my website I have two images/buttons called Get Started and Learn More. The images are wrapped with an anchor tag to take you to separate pages. However, the clickable area is much larger then the actual image. And I'm not sure why. Any help would be appreciated. HTML ```

``` CSS ``` /*Buttons*/ #buttonHolder{ } #buttonHolder img{ margin-top:155px; margin-bottom:10px; display:block; margin-left: auto; margin-right: auto; } /*Reduce button sizes on mobile*/ @media all and (min-width:451px) and (max-width: 9…

Accepted Answer

Its caused by the margins you have on the images in the links. You want to move the margins to the anchor tags

```
#buttonHolder a {
display: block;
margin: 155px auto 10px;
width: 226px;
}
```

And give the images no margin

```
#buttonHolder img {
display: block;
margin: 0;
}
```

anchor tag is larger than element it holds

Solution

Problem