两条线之间难以接近的空间

Question

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

我可以通过将.message作为显示块来修复它，并调整tick（codepen here）的top属性，所以我不是要求修复它的方法。我只是想知道为什么它在第一种情况下的表现如此。 我很感激任何帮助。

<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，行高正常（继承自user-agent）。根据{{​​3}}，行高法线大约为1.2，具体取决于用户代理和字体。由于标签和消息范围是内联元素，因此在这些元素上设置行高并不会产生差异并从cfux-field继承行高。

为了使这项工作，有两个选择： -

1. 制作标签显示块（看起来像没有更好的选择 取决于特定浏览器如何计算内容高度）
2. 在cfux-field上设置字体大小，与标签上我想要的字体大小相同。

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

Answer 1

通过添加：

，我可以在保持.message内联的同时修复它

.cfux-field {
  line-height: 1;
}

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

  

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

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