CSS - “悬停到比例”会扰乱其他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);