Question

I have the following code to show an image and under the image to show <a> link as follow:-

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

Here is the result:-

之间的空间

现在我面临的问题是我需要最小化<a>行之间的空间。我尝试添加line-height:5px，但没有任何效果。因此，有人可以对此提出意见吗？谢谢

Answer 1

line-height不会直接影响具有display:inline的元素，例如跨度和锚定链接的默认设置。

line-height CSS属性设置用于行的空间量，例如在文本中。在块级元素上，它指定元素内线框的最小高度。

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

Answer 2

当您尝试display: block与display:inline-block;元素完美配合时，应应用line-height或inline。

<!DOCTYPE html>
<html>
<head></head>
<body>
<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; display:inline-block;" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>
</body>
</html>

Answer 3

在

标记中包裹文字：

<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:5px">
      <a target="_blank" style="line-height:5px" href="https://*********-45937924">
          <p>World's longest sea crossing: ******** ****** bridge opens</p>
      </a>
   </span>
</div>

现在行高样式将起作用

最小化<a> link lines, when the a link text spanes on multiple lines

3 个答案: