CSS边界移动div

Question

我正在使用自定义Leaflet标记，并且正在为已单击的标记添加边框。但是，添加标记会移动div元素。我有一个GIF动画来表明我的意思：

我想要的是在添加金色边框时绿色圆圈保持原位。我的css：

.marker-cluster-div {
background-color: #00ff00;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
color: black;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
}

.selectedMarker {
border: 10px solid gold;
border-radius: 50%;
}

Answer 1

尝试添加硬盒阴影而不是边框​​

.selectedMarker {
    box-shadow: 0 0 0 10px gold;
    border-radius: 50%;
}

框阴影不会改变元素在页面上占用的空间量。

或者，当您的div没有悬停时，添加透明边框。

Answer 2

该位置基于div的左侧和顶部值。它们被计算在内，包括边界，所以div实际上并没有移动，但是div（包括它的边界）也在增长。

为了防止这种情况，最简单的解决方案是始终为其设置边框，但要使该边框透明：

.marker-cluster-div {
  border: 10px solid transparent;
  border-radius: 50%;
}

.selectedMarker {
  border-color: gold;
}

Answer 3

您可以使用box-sizing: border-box来阻止此操作。

.marker-cluster-div {
  background-color: #00ff00;
  width: 40px;
  height: 40px;
  font-size: 12px;
  border-radius: 50%;
  color: black;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  box-sizing: border-box;
  
}
.marker-cluster-div:hover {
  border: 10px solid gold;
  border-radius: 50%;
}

<div class="marker-cluster-div"></div>