链接末尾的额外下划线字符

Question

我有两个并排的数字（带标题），每个数字都充当链接。出于某种原因，左链接的文本有一个额外的带下划线的空格，即使它没有出现在我的 html 文件中。这可能是间距问题吗？我是 CSS 新手，所以可能会有冗余/矛盾。

这是问题的预览：缩放图像

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

编辑：问题已经解决，但我仍然很好奇为什么第二个链接没有空格，而第一个链接有。想法？

Answer 1

将链接设置为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>

这样做的原因是因为<a>默认情况下是一个内联元素，并且您在其中嵌套了内联块/块级元素，而无需更改锚点的显示属性。

来自CSS 2.1 规范：

当一个内联框包含一个流内块级框时，内联框（及其在同一行框内的内联祖先）在块级框（以及任何连续或仅由可折叠的空白和/或流外元素），将内联框分成两个框（即使任一侧为空），块级框的每一侧一个。中断之前和中断之后的行框都包含在匿名块框中，并且块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何产生的翻译也会影响内联框中包含的块级框。