title: anchor tag is larger than element it holds
body: <p>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. </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;!--button Holder--&gt;
  &lt;div class="d-all m-all" id="buttonHolder"&gt;
      &lt;div class="d4-d6 m-all" id="getStarted"&gt;
          &lt;a href="contact.html#contactFormContainer"&gt;&lt;img id="getStartedButton" src="images/get_started_button_vi.jpg" height="52"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="d7-d9 m-all" id="learnMore"&gt;
          &lt;a href="services.html"&gt;&lt;img id="learnMoreButton" src="images/learn_more__button_vi.jpg" height="52" &gt;&lt;/a&gt;
      &lt;/div&gt;
     &lt;div class="m-all d-all"&gt;
         &lt;hr class="hrBreakTop"/&gt;
     &lt;/div&gt;
  &lt;/div&gt;&lt;!--End button holder--&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/*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;
          }
  </code></pre>