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

时间:2019-03-22 13:46:30

标签: html css text hyperlink font-size

由于某种原因,我的文本的可点击区域的高度远大于div和将'a'标记为的高度。如果您运行代码段并将其悬停在文本的下方和下方,则会看到可点击区域比div和'a'标签大得多。有什么想法吗?

谢谢。

$query->whereYear('created_at', '=', date('Y'))
      ->whereMonth('created_at', '=', date('m'))
      ->whereDay('created_at', '=', date('d'));
.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;
 }

1 个答案:

答案 0 :(得分:4)

这是因为您设置的线高实际上比默认的线高小得多。 (如果您删除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>