title: add padding to HTML anchor that has a background-image
body: <p>I have a basic anchor as below and I would like have the background 10x10px, however importantly i'd like to have 1em of padding around the image and not margin so that, on mobile devices it is clickable.</p>
  
  <p>The problem is, as i'm using a background the margin makes the image become tiled across the full area and doesn't increase the clickable area.</p>
  
  <p>Is there a way to use padding and maintain a 10x10px background on the anchor?</p>
  
  <pre><code>&lt;a id="page_close" href="/course/"&gt;&lt;/a&gt;
  
  #page_close {
      background-image: url("/images/close.png");
      height: 10px;
      margin: 1em;
      position: absolute;
      right: 0;
      text-indent: -9999px;
      top: 0;
      width: 10px;
  }
  </code></pre>
  
  <p>This is <code>close.png</code> sprite image:</p>
  
  <p><img src="https://i.stack.imgur.com/sw4qj.png" alt="My close sprite"></p>