出于某种原因,我的文本的可点击区域的高度比设置的 div 和“a”标签大得多。如果您运行代码片段并将鼠标悬停在文本下方和下方,您会看到可点击区域比 div 和“a”标签大得多。有什么想法吗?
谢谢。
.title {
display: flex;
position: absolute;
background-color: red;
z-index: 6;
height: 7em;
width: 20em;
bottom: 11.25vh;
text-align: left;
}
.title a {
font-size: 108px;
line-height: 108px;
text-decoration: none;
color: #000;
font-family: 'Inknut Antiqua', serif;
}
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<div class="title">
<a href="javascript:;">Work</a>
</div>
最佳答案
这是因为你设置的行高实际上比默认行高小很多。 (如果您删除 line-height: 108px;
,您会发现它更大)。
如果您不希望链接溢出 div 大小,您可以将 overflow: hidden
添加到 .title
div。
.title {
display: flex;
position: absolute;
background-color: red;
z-index: 6;
height: 7em;
width: 20em;
bottom: 11.25vh;
text-align: left;
overflow: hidden;
}
.title a {
font-size: 108px;
line-height: 108px;
text-decoration: none;
color: #000;
font-family: 'Inknut Antiqua', serif;
}
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<div class="title">
<a href="http://www.google.com">Work</a>
</div>
关于html - 为什么链接区域的高度比文本大很多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55301005/