title: Remove space around clickable image
body: <p>I'm trying to place a clickable image in the center using <code>padding</code>.</p>
  
  <p>The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.</p>
  
  <p>If I remove <code>padding</code> it works but then the image isn't were I want.</p>
  
  <p>Is there a way to fix this?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="page"&gt;
        &lt;div class="body"&gt;
          &lt;div id="clicktoenter"&gt;
            &lt;h1&gt;&lt;a href="home.html" class="home" title="Home Link"&gt;&lt;/a&gt;&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.body{
      width:940px;
      margin:0 auto;
      padding:0 10px;
      overflow:hidden;
  }
  
  .home{
      margin-bottom: 10px;
      width: 460px;
      height:460px;
      display:block;
      background:url(../images/image.png) center center no-repeat;
      padding:200px 200px;
  }
  
  .home:hover{
      background:url(../images/imageclick.png) center center no-repeat;
      padding:200px 200px;
  }
  </code></pre>