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

问题描述

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

我想了几天，但没有运气。我最好的选择是在锚标记上使用 inline-block，但这会将按钮清除到下一行，这会浪费太多空间。

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>

解决方法

添加：

a {
   padding: 4px 0;
}

它会为 a 元素提供一个来自 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>