添加边距后锚点的可点击区域变大答案

【问题标题】：the clickable area of an anchor become bigger after adding margins on it添加边距后锚点的可点击区域变大
【发布时间】：2018-09-04 06:38:15
【问题描述】：

为了使标题和列表项之间保持距离，我设置了<a> 和margin: 8px 0;。奇怪的是，锚的可点击区域就像我在元素上设置填充一样扩展，但我没有。什么情况？

ul.footer-nav {
    margin: 0 12px;
}
ul.footer-nav > a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 8px 0;
}

<ul class="footer-nav">
    <a href="#help-and-information">HELP & INFORMATION</a>
    <li><a href="#help">Help</a></li>
    <li><a href="#track-order">Track Order</a></li>
    <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

已编辑----------

如果我在元素上同时设置边距和内边距，可点击区域和距离将正常工作。

【问题讨论】：

不应在ul 内直接嵌套a 标签。应该只有 li 标签直接下降。
我可以使用a 作为 UL 的直系子代吗？ stackoverflow.com/questions/11755628/…
需求不清楚，能否请您将所需的输出更新为图像并指定所需的内容。

标签： html css margin padding

【解决方案1】：

您的a 元素设置为display:block，它扩展了它的可点击区域，因此它扩展到整个宽度。我猜你这样做是因为a 默认是display:inline，而vertical margin doesn't work for inline elements。

您可以改用display: inline-block，它仍会显示margin 设置。这是一个例子。我已经完全删除了ul，并给了a元素背景颜色，所以我们可以看看发生了什么：

a {
    background-color:#fe5;
    display: inline-block;
    margin: 8px 0;
}

&lt;a href="#help-and-information"&gt;HELP &amp; INFORMATION&lt;/a&gt;

用display:block;与原版比较

a {
    background-color:#fe5;
    display: block;
    margin: 8px 0;
}

&lt;a href="#help-and-information"&gt;HELP &amp; INFORMATION&lt;/a&gt;

请注意，正如 cmets 警告的那样，您不应该在 ul 列表中直接包含 a 元素 - 这是无效的并且可能会产生不需要的结果。

【讨论】：

【解决方案2】：

一种方法，尽管将链接移出 ul 可能是最简单的。

ul.footer-nav {
    margin: 0 12px;
}
ul.footer-nav > a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 8px 0;
}
ul.footer-nav li:first-child {
    list-style: none;
}
ul.footer-nav li:first-child a {
    text-decoration: none !important;       
}

<ul class="footer-nav">
    <li><a href="#help-and-information">HELP & INFORMATION</a></li>
    <li><a href="#help">Help</a></li>
    <li><a href="#track-order">Track Order</a></li>
    <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

【讨论】：

【解决方案3】：

理想情况下，ul 应该只有 li 的子元素。

如果你想制作标题，那么还有其他标签，如h1、h2等。

所以，你应该修改你的代码如下：

ul.footer-nav {
  margin: 0 12px;
}

h3 {
  text-align: center;
}

h3 > a {
  color: black;
}

<h3>
  <a href="#help-and-information">HELP & INFORMATION</a>
</h3>
<ul class="footer-nav">
  <li><a href="#help">Help</a></li>
  <li><a href="#track-order">Track Order</a></li>
  <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

【讨论】：