当边框应用于 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;
}

Answer 2

悬停后可以使用transform: translate(-2px, -2px)保持原位

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

Answer 3

另一种方法是将 margin:-2px 0 0 -2px; 添加到 container:focus 和 containr:hover

.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 {
  margin:-2px 0 0 -2px;
  border-width: 2px;
  border-style: solid;
  border-color: #419BF9;
  border-radius: 15px 5px 5px 15px;
}

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

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

How to prevent div elements from moving when border is applied to div?

html

css

border