Extra underlined char at the end of a link

Question

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.

Here's a preview of the problem: Zoomed image

#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;
}

<div id="leg">
  <p id="leg_tag">How to reach me:</p>
  <a class="leg_link" href="..." target="_blank">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My GitHub!</p>
      </figcaption>
    </figure>
  </a>
  <a class="leg_link" href="...">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My LinkedIn!</p>
      </figcaption>
    </figure>
  </a>
</div>

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?

Answer 1

Set the link to be display: inline-block and then you can add your text-decoration: underline, if desired, to the text itself (<p>).

#leg {
  text-align: center;
}
#leg_tag {
  text-align: center;
  color: white;
}
.leg_link {
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
}
.leg_link figure {
  display: inline-block;
  margin: 0 auto 0 auto;
}
.leg_link p {
  text-decoration: underline;
}

<div id="leg">
  <p id="leg_tag">How to reach me:</p>
  <a class="leg_link" href="..." target="_blank">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My GitHub!</p>
      </figcaption>
    </figure>
  </a>
  <a class="leg_link" href="...">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My LinkedIn!</p>
      </figcaption>
    </figure>
  </a>
</div>

The reason for this is because <a> is an inline element by default, and you have nested inline-block / block level elements inside it, without changing the anchor's display property.

From the CSS 2.1 Spec:

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.