title: Posistion a background image into its own element's margin - Is this Possible?
body: <p>I have anchor item with margins around it.  I want to posistion a bg image in the margin.  Can you do this?  It works with padding, but want to use margin.  To note jquery is adding in the .active class to the link.  Maybe using box-sizing?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav&gt;&lt;a class="arrow_me" href="Page"&gt;Page&lt;/a&gt;&lt;a href="Page"&gt;Page&lt;/a&gt;&lt;a href="Page.aspx"&gt;Page&lt;/a&gt;&lt;a href="Page" target="_blank"&gt;Page&lt;/a&gt;&lt;/nav&gt;
  </code></pre>
  
  <p>Before Css With Margin - doesn't work:</p>
  
  <pre><code>nav {max-width: 960px; margin: 0 auto; padding:0 15px}
  nav a {margin: 20px 35px 20px 0; color:#48718c; text-transform:uppercase;     text-decoration:none !important; font-size:11px; float:left}
  nav a.arrow_me.active {background: url(../img/arrow.png) no-repeat 50% 35px;}
  nav a:hover, nav a.active, #menuFilter a.current, #menuFilter a:hover {color:#cdcdce}
  </code></pre>
  
  <p>After with padding - working:  </p>
  
  <pre><code>nav {max-width: 960px; margin: 0 auto; padding:0 15px}
  nav a {padding: 20px 35px 20px 0; color:#48718c; text-transform:uppercase;      text-decoration:none !important; font-size:11px; float:left}
  nav a.arrow_me.active {background: url(../img/arrow.png) no-repeat 50px 35px;}
  nav a:hover, nav a.active, #menuFilter a.current, #menuFilter a:hover {color:#cdcdce}
  </code></pre>