我有以下代码来显示图像并在图像下方显示 <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
但它没有任何效果。所以有人可以就此提出建议吗?
谢谢
最佳答案
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.
选项 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>
关于html - 当链接文本跨越多行时,最小化 <a> 链接行之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52946532/