CSS:hover设置按钮padding时多按钮同步变化问题求助

问题现象 #

想要实现鼠标悬停单个按钮时，仅该按钮修改padding值，但目前悬停其中一个按钮时，三个按钮的padding会同时变化。.one:hover可以单独改变按钮背景色，但padding无法单独生效；尝试移除.buttons和.button的padding属性后，问题仍然存在。

问题原因 #

1. HTML结构错误：第一个按钮标签提前闭合，导致<a>标签被放在按钮外部，后续多余的</button>破坏了DOM结构，使得布局逻辑混乱
2. Flex布局空间分配冲突：.button设置了margin-left: auto; margin-right: auto;，在flex容器中，这种自动外边距会让按钮的空间分配互相影响，当一个按钮padding变化时，容器会重新分配所有按钮的位置，看起来像是所有按钮的padding都变了
3. 盒模型未设置：padding变化会改变按钮的总宽度，进一步触发flex容器的重排，导致其他按钮的位置被挤压

解决步骤 #

1. 修复HTML结构错误

把第一个按钮的内容正确包裹在<button>标签内，删除多余的闭合标签：

<div class="buttons"> 
  <button class="button one">
    <a href="../new-odin-recipes/chikenpasta.html">Tomato & Basil Chiken Pasta</a>
  </button>
  <button class="button two">
    <a href="../new-odin-recipes/BBQ-ribs.html">BBQ Ribs </a>
  </button>
  <button class="button three">
    <a href="../new-odin-recipes/marsala.html">Chiken Marsala</a>
  </button>
</div> 

2. 调整Flex布局与盒模型

修改CSS，给flex容器设置合理的内容分布方式，给按钮添加box-sizing: border-box避免padding改变宽度，同时移除按钮的自动外边距：

.buttons {
    display: flex;
    font-size: 24px;
    padding: 10px;
    justify-content: space-around; /* 用这个控制按钮间的空间分配 */
    gap: 10px; /* 可选：设置按钮间的固定间距 */
}

.button {
    text-align: center;
    padding: 10px;
    position: relative;
    /* 移除margin:auto，改用容器的justify-content控制位置 */
    width: 150px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
    box-sizing: border-box; /* 让padding包含在宽度内，不改变总宽度 */
}
  
.one:hover {
    padding: 25px;
    background-color: black;
}

额外说明 #

• box-sizing: border-box是核心：它让元素的padding和border都包含在设置的width内，不会因为padding变化导致元素宽度增加，避免挤压其他按钮
• 用flex容器的justify-content替代按钮的margin:auto，可以更稳定地控制按钮布局，避免元素间的布局干扰

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