为什么链接区域的高度比文本大得多

Question

出于

某种原因，我的文本的可点击区域的高度比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>

Answer 1

这是因为您设置的行高实际上比默认行高小得多。(如果你删除line-height: 108px;你会看到它大得多(。

如果您不希望链接流过div 大小，则可以将overflow: hidden添加到.titlediv。

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