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

Question

假设以下代码：

*,
*: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>

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

Answer 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>

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

Change in one element effects other elements in that row

css

margin

padding

spacing