CSS卡片按钮：鼠标悬停会为整个卡片添加填充/边距（我想）

我是CSS学习者

我正在用3张卡片预览制作前端导师练习。在我将悬停状态添加到按钮上之后，当我将鼠标悬停在上面时，整个卡将消耗几个像素。卡片是用flexbox制作的。我试图找到这件事的来源，但到目前为止我无法找到

这就是整件事

/*----*/

---

有人知道为什么会发生这种情况吗？我可以做些什么来固定卡的大小？

。btn-1没有边框。而.btn-1:hover具有

1px

边框。要解决此问题，请为其设置

1px透明

边框

.btn-1 {
  color: var(--orange);
  border: 1px solid  transparent;
}

---

.btn-1没有边框。而.btn-1:hover具有

1px

边框。要解决此问题，请为其设置

1px透明

边框

.btn-1 {
  color: var(--orange);
  border: 1px solid  transparent;
}

只需在你的.btn样式上加上边框，问题就解决了：）由于悬停增加了一个像素，现在卡变大了

border: var(--tWhite) 1px solid; 

只需在你的.btn样式上加上边框，问题就解决了：）由于悬停增加了一个像素，现在卡变大了

border: var(--tWhite) 1px solid;