html - 当链接文本跨越多行时，最小化 链接行之间的空间

Question

我有以下代码来显示图像并在图像下方显示 <a>链接如下:-

<div style="float: left;margin-left:8px;max-width:185px">
<img style="height:90px;width:185px" src="******/9854/production/_103969983_gettyimages-939175472.jpg" alt="ntitle">
<br>
<span style="font-size:9px">
<a target="_blank" style="line-height:5px" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>

这是结果:-

现在我面临的问题是我需要最小化 <a> 之间的空间线。我试着添加 line-height:5px但它没有任何效果。所以有人可以就此提出建议吗？谢谢

Answer 1

line-height 不会直接影响带有 display:inline 的元素，例如带有 span 和 anchor 链接的默认值。

The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element.

^MDN

选项 1

将 line-height 应用于 div

div {
  width: 150px;
  line-height: 9px;
  margin: 1em auto;
}

span {
  background: pink;
  font-size: 9px;
}

<div><span>
<a target="_blank" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>

或选项2

将跨度设置为display:inline-block

div {
  width: 150px;
  margin: 1em auto;
}

span {
  background: pink;
  font-size: 9px;
  display: inline-block;
  line-height: 9px;
}

<div><span>
<a target="_blank" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>