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

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

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

并且图片没有边距

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

Answer 2

在这样的图像上设置float：left属性，你的问题就会解决

#buttonHolder img {
    float:left;
}

Answer 3

对我来说，它有助于制作图像display:block。它不能内联的原因是（我听说）为行之后的字符（如“ y”）保留了空白。

anchor标签比它所拥有的元素大

3 个答案: