将鼠标悬停在图像上时，HTML内容会被压缩

Question

我对div（.treatment）中的内容有疑问，当内容悬停在图片上时，该内容会被推下：

.treatment {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 33%;
  padding: 0 2.4rem;

  &__img {
    border-radius: 50%;
    border: 2px solid $color-grey-light2;
    transition: border .2s;

    &:hover {
      border: 3px solid $color-action;
      cursor: pointer;
    }
}

是否有解决此问题的方法？

Answer 1

这是由于border厚度不同，加上原始尺寸。

将box-sizing: border-box;添加到图片的CSS中，此包含元素宽度和高度中的边框粗细，有助于避免此问题。