Почему область ссылки намного больше по высоте, чем текст?

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;, вы увидите, что он намного больше).

Вы можете добавить overflow: hidden в .title div, если не хотите, чтобы ссылка проходила по размеру 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>