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

<!--button Holder-->
<div class="d-all m-all" id="buttonHolder">
    <div class="d4-d6 m-all" id="getStarted">
        <a href="contact.html#contactFormContainer"><img id="getStartedButton" src="images/get_started_button_vi.jpg" height="52"></a>
    </div>
    <div class="d7-d9 m-all" id="learnMore">
        <a href="services.html"><img id="learnMoreButton" src="images/learn_more__button_vi.jpg" height="52" ></a>
    </div>
   <div class="m-all d-all">
       <hr class="hrBreakTop"/>
   </div>
</div><!--End button holder-->

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: 989px){
        #buttonHolder img{
            margin-top:65px;
            width:45%;
            display:block;
            margin-left: auto;
            margin-right: auto;
            height:auto;
        }

    } 
    /*Reduce padding top on mobile*/
    @media all and (min-width:0px) and (max-width: 450px){
        #buttonHolder img{
            margin-top:0px;
        }

    } 


    #getStarted{

    }
        #getStartedButton{
            margin-right:20px;
        }
        /*Add top margin to button to prevent merging with VoipInnovations middle logo*/
        @media all and (min-width: 0px) and (max-width: 989px){
            #getStartedButton{
                margin-top:15px;
            }
        } 

    #learnMore{

    }
        #learnMoreButton{
            margin-left:20px;
        }

Answer 1

For me it helped to make the image display:block. The reason why it cannot be inline is (i heard) the white-space reserved for characters that go bellow the line like "y".

Answer 2

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;
}

Answer 3

just set float:left property on image like this and your problem will be solved

#buttonHolder img {
    float:left;
}