title: CSS Sprits, Add Padding to Background Image
body: <p>i'm new to css sprits. i have added a <strong>small red color arrow like image</strong> to all links in a DIV ID. it looks like this.(image attached)</p>
  
  <p>how to get some padding after the background image ? i mean some space between image and text using CSS.</p>
  
  <p><img src="https://i.stack.imgur.com/mDIMO.png" alt="enter image description here"></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#maincontent a:link {
  background: url(images/css-images.png) no-repeat top left;
  background-position: 0 0;
  width: 4px;
  height: 12px;
  display:inline;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="maincontent"&gt;
  &lt;a href="results/2013/31r09sup.php"&gt;Btech III&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>i tried adding to css <em>padding right</em>, but it is giving some space after text not after image.</strong>  </p>