Extra underlined char at the end of the link

I have two numbers (with inscriptions) next to each other, and each figure acts as a link. For some reason, the text of the left link has an additional underlined space, although it does not appear in my html file. Could this be an interval issue? I am new to CSS, so there may be reductions / contradictions.

Here's a preview of the problem: Enlarged 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>
Run codeHide result

EDIT: The problem is resolved, but I'm still wondering why the second link does NOT have a place, while the first does it. Ideas?

+4
source share
1 answer

display: inline-block, text-decoration: underline, , (<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>
Hide result

, <a> , / .

CSS 2.1 Spec:

, ( ) ( , / ), ( ), () . -, . , -, .

+2

Source: https://habr.com/ru/post/1623623/


All Articles