为啥链接区域的高度比文本大得多？

Posted 2023-03-06

【中文标题】为啥链接区域的高度比文本大得多？

【英文标题】：Why is the link region much larger in height than the text?为什么链接区域的高度比文本大得多？

【发布时间】：2019-08-13 12:32:13

【问题描述】：

由于某种原因，我的文本的可点击区域的高度比 div 和“a”标签设置的要大得多。如果您运行代码 sn-p 并将鼠标悬停在文本下方和下方，您会看到可点击区域比 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>

【参考方案1】：

这是因为您设置的行高实际上远小于默认行高。 （如果你删除 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>

【讨论】：

太棒了 - 感谢您的帮助！

感谢您的解决方案，这让我发疯了