div应用边框时如何防止div元素移动？

Question

我目前正在研究一个包含单选按钮和标签的 div 元素。它看起来像这样：

当鼠标悬停在 div 元素上时，我向该 div 应用边框，因此结果如下所示：

这里的问题是，当边框可见时，您可以看到元素由于边框大小而向下和向右移动 2px。边框大小为 2px。

我怎样才能防止这种情况发生？

这是我正在使用的相关CSS：

.container {
  display: inline-flex;
  align-items: center;
}

.label {
  display: inline-block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 15px;
}

.radioButton {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid white;
  margin: 0;
  appearance: none;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 0 2px #002750;
  transition: all ease-in 0.2s;
}

.radioButton:checked {
  background-color: #002750;
}

.radioButton:focus,
.radioButton:hover {
  box-shadow: 0 0 0.15em 0.2em #0c64e7;
}

.container:focus,
.container:hover {
  border-width: 2px;
  border-style: solid;
  border-color: #419BF9;
  border-radius: 15px 5px 5px 15px;
}

<div class="container">
  <input type="radio" class="radioButton">
  <label class="label">Copy</label>
</div>

我感谢每一个帮助！

Answer 1

最简单的解决方案是为悬停时要添加边框的 div 提供透明边框。

.container {
  display: inline-flex;
  align-items: center;
  border: 2px solid transparent;
}