如何设置CSS使按钮仅自身区域可点击，外部区域无法触发点击事件？

制作堆叠排布的按钮时，蓝色高亮的按钮外侧空白区域也能触发点击，需要实现仅按钮自身视觉区域响应点击的效果。

CSS代码 #

.buttons .button{  
  background-color: #041e42; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin-left: 150px;
  margin-right: 300px;
  margin-bottom: 20px;
  cursor: pointer;
  flex-direction: column;
} 

React代码 #

const Home = () => {
  return (
    <div>
      <div className="header">
        <h1> Software  </h1>
        <h1>Summer 2022 </h1>
        <h1> Section 01 </h1>
        <h1> Team 2 </h1>
      </div>
      <div className="buttons">
        <Link to="/">
          <button className="button">button 1</button>
        </Link>

        <Link to="/">
          <button className="button">button 2</button>
        </Link>

        <Link to="/PersonalAbout/page2">
          <button className="button">button 3</button>
        </Link>

        <Link to="/">
          <button className="button"> button 4</button>
        </Link>

        <Link to="/">
          <button className="button">button 5</button>
        </Link>

        <Link to="/">
          <button className="button">button 6</button>
        </Link>

        <Link to="/">
          <button className="button">button 7</button>
        </Link>
      </div>
    </div>
  )
}

点击范围异常由两点导致：

• 左右边距直接设置在<button>元素上，外层包裹的<Link>作为行内元素默认占满父容器整行宽度，<Link>覆盖的按钮外侧空白区域会响应点击事件。
• 将<button>交互元素嵌套在<Link>链接标签内不符合HTML语义规范，容易出现事件冒泡、点击范围异常的问题。

方案1：最小改动修复 #

调整边距的设置位置，让<Link>的宽度和内部按钮完全匹配，同时优化语义：

1. 修改CSS，将按钮的左右边距转移到外层<Link>上，移除按钮上无效的flex-direction属性（普通块元素设置该属性不生效）：

.buttons a {
  display: block;
  margin-left: 150px;
  margin-right: 300px;
  margin-bottom: 20px;
}
.buttons .button{  
  background-color: #041e42; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
}

2. 移除嵌套的<button>标签，直接将button类名添加到<Link>上，避免交互元素嵌套问题：

<div className="buttons">
  <Link to="/" className="button">button 1</Link>
  <Link to="/" className="button">button 2</Link>
  <Link to="/PersonalAbout/page2" className="button">button 3</Link>
  <Link to="/" className="button">button 4</Link>
  <Link to="/" className="button">button 5</Link>
  <Link to="/" className="button">button 6</Link>
  <Link to="/" className="button">button 7</Link>
</div>

方案2：布局优化（更易维护） #

通过父容器统一控制左右间距，不需要单独给每个链接/按钮设置边距，布局一致性更强：

.buttons {
  padding-left: 150px;
  padding-right: 300px;
}
.buttons .button{  
  background-color: #041e42; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin-bottom: 20px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

该方案下按钮宽度会自动适配父容器的内容区域，点击范围和视觉区域完全重合，后续调整页面左右间距只需要修改父容器的padding值即可。

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