Html div在悬停时因边框而扩展其大小

我有一个div，当我将另一个div悬停在它里面时，我在内部div的hover上添加了一个边框效果，并且父div也扩展到了添加到子div的边框的宽度。我如何停止这个操作。在这里，我们可以看到这种行为

.付款箱{ 填充物：5px； 文本对齐：居中； 边框：1px纯蓝色； 宽度：150px； } .付款标志{ 高度：100px； } 1.支付链接{ 颜色：fff； 填充：12px； 背景：E2231A； 保证金：20px自动5px自动； 显示：内联块； 字号：550； } .付款链接：悬停{ 颜色：E2231A； 边框：1px实心E2231A； 背景：fff； }

---

尝试向父级添加最大宽度

向链接添加透明边框：

 .payment-link{
  color: #fff;
  padding: 12px;
  background: #E2231A;
  margin: 20px auto 5px auto;
  display: inline-block;
  font-weight: 550;
  border: 1px solid transparent;
 }

---

实现这一点有多种方法。这里有两个：

用框阴影替换边框

.付款箱{ 填充物：5px； 文本对齐：居中； 边框：1px纯蓝色； 宽度：150px； } .付款标志{ 高度：100px； } 1.支付链接{ 颜色：fff； 填充：12px； 背景：E2231A； 保证金：20px自动5px自动； 显示：内联块； 字号：550； } .付款链接：悬停{ 颜色：E2231A； 盒影：0 1px E2231A； 背景：fff； }

---

为什么不用边框来启动按钮，而不是将其添加到悬停状态？由于它与背景颜色相同，因此对非悬停状态没有影响

.付款箱{ 填充物：5px； 文本对齐：居中； 边框：1px纯蓝色； 宽度：150px； } .付款标志{ 高度：100px； } 1.支付链接{ 颜色：fff； 填充：12px； 背景：E2231A； 保证金：20px自动5px自动； 显示：内联块； 字号：550； 边框：1px实心E2231A；/*将其从悬停位置移动*/ } .付款链接：悬停{ 颜色：E2231A； 背景：fff； } 为支付链接提供透明边框，悬停时添加边框颜色

.payment-link{
    border: 1px solid transparent;
}

.payment-link:hover{
    border-color: #E2231A;
}

.payment-link{
    border: 1px solid #E2231A;
}

或者只给支付链接一个边框颜色

.payment-link{
    border: 1px solid transparent;
}

.payment-link:hover{
    border-color: #E2231A;
}

.payment-link{
    border: 1px solid #E2231A;
}

---

是的，你是对的，只是链接的边界，而不是悬停，因为它是相同的颜色