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

Question

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; }

Work

Run code snippetExpand snippet JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

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; }

Work

Run code snippetExpand snippet