如何移除HTML链接中图片与文字间的下划线？

原问题代码 #

<div class="pingid-link">
  <a href="/assets/PingID/pingid-setup.html" class="box" target="_blank" rel="noopener noreferrer">
    <img src="/assets/PingID/PingID.jpg" alt="PingID">&nbsp;&nbsp;&nbsp;&nbsp;<span style="">PingID Setup</span></a>
</div>

问题核心是链接内的 空格被包含在链接文本范围内，导致这部分空格也会显示下划线。以下是几种可行的解决方法：

• 方法一：取消整个链接的下划线
  如果不需要链接的任何下划线，直接给链接类添加样式：

.box {
  text-decoration: none;
}

或者针对父容器下的链接设置：

.pingid-link a {
  text-decoration: none;
}

• 方法二：保留文字下划线，移除空格和图片部分的下划线
  调整HTML结构，用margin代替 控制间距，同时给文字单独设置下划线：
  修改后的HTML：

<div class="pingid-link">
  <a href="/assets/PingID/pingid-setup.html" class="box" target="_blank" rel="noopener noreferrer">
    <img src="/assets/PingID/PingID.jpg" alt="PingID">
    <span style="text-decoration: underline; margin-left: 16px;">PingID Setup</span>
  </a>
</div>

配合CSS取消链接本身的下划线：

.box {
  text-decoration: none;
}

• 方法三：用CSS跳过图片对象的下划线
  使用text-decoration-skip: objects属性，让下划线自动跳过图片这类元素，不影响文字的下划线：

.box {
  text-decoration-skip: objects;
}

注意：该属性在现代主流浏览器中支持较好，若需兼容旧版浏览器，优先选择前两种方法。

内容的提问来源于stack exchange，提问作者user33814