CSS border moving 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

嘗試添加硬盤的box-shadow，而不是一個邊界

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

box-shadow不會更改元素在頁面上佔用的空間量。

或者，當您的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>