悬停拉伸Button忽略margin：为何调整padding后按钮移位？

核心原因是按钮的总占用宽度变化触发了布局重排：

• 元素在页面中占据的总宽度是「内容宽度 + 左右padding + 左右border + 左右margin」的总和。
• 你当前非hover状态的按钮，总宽度刚好和 hover 时设置 padding: 0 25px; margin: 0 的总宽度相等——比如非hover时可能是 padding: 0 20px; margin: 0 5px，两者总宽度一致，hover时只是把margin的空间转换成了padding，按钮视觉上“拉伸”但整体占宽不变，所以其他按钮位置不会偏移。
• 当你把hover的padding改成24px，总宽度就变成「内容宽度 + 24*2 + 0」，比非hover状态的总宽度小，按钮整体变窄。浏览器会重新计算布局，把旁边的按钮往这个变窄的按钮方向推，就出现了移位现象。

补充解决思路 #

如果要保持hover时按钮视觉变化但其他元素不动，有两种简单方案：

• 给按钮设置固定width值，强制总宽度不变，hover时只调整内部padding。
• 用透明border替代margin：非hover时设border: 5px solid transparent，hover时把border设为0、同时增加padding，总宽度始终一致。

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