锚标签大于它所持有的元素

Question

在我的网站上，我有两个图像/按钮，称为“入门”和“了解更多”。图像用锚标记包裹，以带您到单独的页面。但是，可点击区域比实际图像大得多。我不知道为什么。任何帮助，将不胜感激。

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

对我来说，它有助于塑造形象display:block。它不能内联的原因是（我听说）为像“y”这样的行下方的字符保留的空白。

Answer 2

这是由链接中的图像上的边距引起的。您想要将边距移动到锚标记

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

并给图像没有边距

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