为何给锚点设置margin后可点击区域会异常扩大？

首先要明确，你遇到的奇怪现象核心原因是HTML结构不符合规范——<ul>（无序列表）的直接子元素只能是<li>标签，不能直接嵌套<a>标签。浏览器碰到这种违规结构时，会自动执行「错误修正」（比如把<a>从<ul>中移出，或者以非常规逻辑渲染），这就导致了你看到的margin表现异常，看起来像是点击区域被padding扩大了。

具体问题拆解 #

• 你的HTML里<ul class="footer-nav">直接包含了<a>标签，这违反了HTML列表的结构规则；
• 当你给这个违规的<a>设置display: block和margin: 8px 0时，浏览器的错误渲染逻辑让元素的点击区域和margin区域产生了混淆，出现了不符合预期的交互范围。

修复步骤 #

1. 修正HTML结构 #

把<a>标签放到<li>内部，让列表结构符合规范：

<ul class="footer-nav">
  <li><a href="#help-and-information">HELP & INFORMATION</a></li>
  <li><a href="...">其他链接内容</a></li>
</ul>

2. 调整CSS样式 #

现在可以针对<li>或者内部的<a>设置间距，避免异常表现：

ul.footer-nav { 
  margin: 0 12px;
  padding: 0; /* 可选：移除默认列表内边距，按需调整 */
  list-style: none; /* 可选：移除默认列表符号 */
}

ul.footer-nav > li {
  margin: 8px 0; /* 将原给<a>的margin移到<li>上，控制列表项间距 */
}

ul.footer-nav > li > a { 
  display: block; 
  font-size: 15px; 
  font-weight: 600; 
  color: #000;
  /* 这里可根据需求添加padding等样式，不会再出现点击区域异常 */
}

调整后，不仅HTML结构合法，样式也会按预期工作，点击区域只会是<a>元素本身的范围，不会被margin干扰。另外补充一点：不同浏览器的错误修正行为可能略有差异，遵循HTML规范是避免这类奇怪问题的最优解。

内容的提问来源于stack exchange，提问作者hayley