Question

我有两个数字（带字幕），并排，每个数字都作为一个链接。出于某种原因，左侧链接的文本有一个额外的带下划线的空格，即使它没有出现在我的html文件中。这可能是间距问题吗？我是CSS的新手，因此可能存在裁员/矛盾。

以下是问题的预览：Zoomed image

＆＃13;

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

＆＃13;

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

＆＃13;

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

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 Spec：

当内联框包含一个流内块级别框时，内嵌框（及其同一行框内的内联祖先）在块级框（以及任何连续的块级兄弟）中被打破。仅由可折叠的空白和/或流出元素分隔），将内联框分成两个框（即使任一边为空），块级框的每一边一个。中断前和中断后的行框都包含在匿名块框中，块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何结果转换也会影响内联框中包含的块级框。

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

1 个答案: