CSS - "Hover to Scale"干扰其他DIV的位置

Question

我的问题是，为什么当链接按钮缩放时，Div的位置会发生变化？以及如何避免这种情况？

.link-button {
  display: inline-block;
  box-sizing: content-box;
  cursor: pointer;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #018dc4;
  font: normal normal bold 1em/normal Arial Black;
  color: rgba(255,255,255,0.9);
  text-align: center;
  background: #12d27c;
}
.link-button:hover {
  padding: 17px 27px;
}
div{
  background: blue;
  color: #fff;
  margin: 10px 0px;
}

<a href"#" class="link-button">Lorem</a>
<div>
Lorem Ipsum
</div>

Answer 1

不要在悬停时更改填充，而是像这样更改 transform 属性。此属性不会更改元素的实际高度，因此不会移动下面的div。

.link-button:hover {
  transform: scale(1.3);
}

如果您只想更改水平比例，请使用

transform:scaleX(yourvalue);