CODEWITHSUNDEEP
htmlcsstexthyperlinkfont-size
Nathan Wilson
Nathan Wilson

Reputation: 179

Why is the link region much larger in height than the text?

For some reason, the clickable region for my text is much larger in height than the div and 'a' tag are set as. If you run the code snippet and hover beneath and below the text, you will see that the clickable area is much larger than the div and 'a' tag. Any ideas?

Thanks.

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

Upvotes: 3

Views: 1458

Answers (1)

coops
coops

Reputation: 1714

It is because you've set a line height that is actually much smaller than the default line height. (if you remove line-height: 108px; you will see it is much larger).

You can add overflow: hidden to the .title div if you don't want the link to flow over the div size.

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

Upvotes: 6

Related Questions