Перемещение CSS-границы div

Я использую пользовательские маркеры листов, и добавляю границу к маркеру, на который был нажат. Однако добавление маркера перемещает элемент 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%;
}
3 ответа

Попытайтесь добавить жесткую коробку-тень вместо границы

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

Ящик-тень не изменяет объем пространства, занимаемого элементом на странице.

Кроме того, добавьте прозрачную рамку, когда ваш div не зависает.


Позиция основана на левом и верхнем значениях div. Они учитываются, включая границу, поэтому div фактически не перемещается, но div (включая его границу) растет.

Чтобы этого избежать, самым простым решением было бы всегда давать ему границу, но сделать эту границу прозрачной:

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

.selectedMarker {
 border-color: gold;
}


Чтобы предотвратить это, вы можете использовать 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%;
}

licensed under cc by-sa 3.0 with attribution.