如何摆脱包裹锚标签中的垂直悬停间隙？

Question

当我将鼠标悬停在锚标记上时，它会闪烁。这是因为包裹的锚标签的行之间有垂直间隙。此外，如果我碰巧在两行之间单击，link 不会激活。我想摆脱导致它的闪烁和垂直悬停间隙。布局的其余部分，包括表观行高和按钮位置（与锚标记的最后一个字在同一行）应保持不变。

我想了几天都没有运气。我最好的选择是在锚标记上使用内联块，但这会将按钮清除到下一行，这会浪费太多 space.

body {
  line-height: 1.5;
  width: 300px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
  <a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </a>
  <button>click</button>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

已添加：

a {
   padding: 4px 0;
}

它会给 a 元素一个额外的 space 来自 top 和 bottom，它不会影响 gaps。

body {
  line-height: 1.5;
  width: 300px;
}
a {
  text-decoration: none;
  padding: 4px 0;
}
a:hover {
  text-decoration: underline;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
  <a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </a>
  <button>click</button>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

如何摆脱包裹锚标签中的垂直悬停间隙？

How to get rid of vertical hover gaps in a wrapped anchor tag?

css

typography