2行之间令人讨厌的无法访问的空间[重复]

Posted 2023-03-05

【中文标题】2行之间令人讨厌的无法访问的空间[重复]

【英文标题】：Annoying inaccessible space between 2 lines [duplicate]

【发布时间】：2015-09-16 23:58:15

【问题描述】：

我创建了一个自定义复选框 (codepen here)。单击复选框或文本时，应选中/取消选中复选框。它在大多数情况下都有效，但两行文本之间有一个令人讨厌的小空间，它不可点击（光标不会变为指针）。

我可以通过将 .message 设置为显示块并调整刻度的顶部属性 (codepen here) 来修复它，所以我不是在寻求修复它的方法。我只是想知道为什么它在第一种情况下会这样。 我将不胜感激。

<div class="cfux-field">
  <input type="checkbox" id="cbOptIn" />
  <label for="cbOptIn">
    <span class="message">Send me the latest news, travel tips and deals from XYZ Limited</span></label>
</div>

编辑：我找到了部分答案和 nkorth 的答案，虽然没有解释原因，但给了我一个线索。 cfux-field 上的字体大小为 16px，行高正常（继承自用户代理）。根据MDN，line-height normal 大约为 1.2，具体取决于用户代理和字体。由于标签和消息跨度是内联元素，因此在它们上设置 line-height 并没有什么不同，而是从 cfux-field 继承 line-height。

因此，要完成这项工作，有 2 个选项：-

制作标签显示块（看起来是更好的选择，但实际上并非如此） 取决于特定浏览器如何计算内容高度） 设置 cfux-field 上的字体大小与我希望在标签上设置的字体大小相同。

但这并不能解释为什么增加的行高会使内容无法访问（即不可点击）——可能是因为浏览器计算内容高度的方式——some explaination here。

【问题讨论】：

问题是内联元素的hover-area 不是周围的矩形（边界框）。请参阅：jsfiddle.net/61yncufv/2 而对于块元素来说，这是正确的。这就是为什么您的第一个修复程序有效的原因。虽然我不建议使用 line-height/font-size 作为解决方法。最好使用display: inline-block（上例中的第二个跨度）。

【参考方案1】：

我能够通过添加以下内容来修复它，同时保持 .message 内联：

.cfux-field 
  line-height: 1;

在label 上设置行高不会做任何事情，因为它是一个内联元素。 （有关这方面的更多详细信息，请参阅https://***.com/a/9814390/685933。）这意味着使用的行高是浏览器的默认值。 From MDN:

桌面浏览器（包括 Firefox）使用大约 1.2 的默认值，具体取决于元素的字体系列。

Here is an example 显示两种不删除空格的样式和一种删除空格的样式。在内联元素上设置背景颜色有助于可视化可点击区域。

【讨论】：

在我编辑帖子时没有看到您的编辑。 :-)