title: Extra underlined char at the end of a link
body: <p>I have two figures (with captions), side by side, and each figure acts as a link. For some reason, the text of the left link has an extra underlined space, even though it doesn't appear in my html file. Could this be a spacing issue? I'm new to CSS, so there might be redundancies/contradictions. </p>
  
  <p>Here's a preview of the problem: <a href="http://s-j-b.github.io/images/html_bug.png" rel="noreferrer">Zoomed image</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#leg {
    text-align: center;
  }
  #leg_tag {
    text-align: center;
    color: white;
  }
  .leg_link {
    margin-left: 10px;
    margin-right: 10px;
  }
  figure {
    display: inline-block;
    margin: 0 auto 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="leg"&gt;
    &lt;p id="leg_tag"&gt;How to reach me:&lt;/p&gt;
    &lt;a class="leg_link" href="..." target="_blank"&gt;
      &lt;figure&gt;
        &lt;img src="..." width="30" height="30"&gt;
        &lt;figcaption&gt;
          &lt;p&gt;My GitHub!&lt;/p&gt;
        &lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class="leg_link" href="..."&gt;
      &lt;figure&gt;
        &lt;img src="..." width="30" height="30"&gt;
        &lt;figcaption&gt;
          &lt;p&gt;My LinkedIn!&lt;/p&gt;
        &lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: The problem has been resolved, but I still am curious as to why the second link does NOT have a space, while the first one does. Ideas?</p>