一个元素的变化会影响该行中的其他元素答案

【问题标题】：Change in one element effects other elements in that row一个元素的变化会影响该行中的其他元素
【发布时间】：2021-09-10 01:20:59
【问题描述】：

假设以下代码：

*,
*:hover {
  transition: 0.2s all ease;
}

button {
  margin: 0% 5% 0% 5%;
  padding: 0% 1% 0% 1%;
}

button:hover {
  padding: 0% 2% 0% 2%;
}

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

如果有空间，如何防止一个按钮的填充增加以推动右侧的按钮？

【问题讨论】：

你可以为这个按钮定义一个绝对位置或者将它们存储在一个固定大小的div中。
@CrynetOmega 将position:absolute 完全隐藏了按钮 1 和 2。我可能没弄对。对于另一种解决方案，我是否将它们中的每一个放在不同的 div 中？我是否将固定大小设置为 div 或元素？
我会将每个按钮放在一个 div 中，将其居中并定义具有固定宽度和高度的 div，例如：width:200px; height:50px; 可能是另一个带有 display:inline-block; 的 div。

标签： css padding margin spacing

【解决方案1】：

减少margin 并确保总数相同（在您的情况下为6%）

*,
*:hover {
  transition: 0.2s all ease;
}

button {
  margin: 0% 5% 0% 5%;
  padding: 0% 1% 0% 1%;
}

button:hover {
  padding: 0% 2% 0% 2%;
  margin: 0% 4% 0% 4%;
}

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

【讨论】：

是不是因为在一个总是相同大小的盒子里增加填充和保持相同的边距在技术上是不可能的？
@LercDsgn 这是合乎逻辑的，因为您正在添加一些东西，因此您还需要删除其他东西以保持整体大小相同（或者我们考虑完全不同的布局在那种情况下有很多方法）