锚标记大于它所包含的元素

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

Answer 3

只需像这样在图像上设置 float：left 属性，您的问题就会得到解决

#buttonHolder img {
    float:left;
}