如何使border不影响div对外的宽高？

Question

是这样的、我想做一个div有固定的宽高、鼠标移上去的时候显示border、但是这个border不能影响后续的div

现在是这样的

然后鼠标移上去的时候、变成了这样、因为border的加入使得第一个商品div的高度增加了、把第二行的商品div移到了后面

Answer 1

用outline，或者设置box-sizing为border-box

Answer 2

初始状态用透明的border，悬浮后改变border的颜色

border:solid 1px transparent

Answer 3

一种思路：border加1像素后，margin减少1像素。

Answer 4

  img {
    width: 200px;
    height: 100px;
    margin-right: 5px;
    cursor: pointer;
    object-fit: cover;
    transition: box-shadow 0.2s ease-in-out;

    &.current {
      border-radius: 3px;
      box-shadow: 0 0 0 2px var(--el-color-primary);
    }
  }

Answer 5

解决了吗。咋解决的、

Answer 6

box-shadow: 0 0 0px 1px rgb(42, 96, 228);也可以 但是不推荐；
推荐使用boder透明变颜色或者outline https://www.zhangxinxu.com/wo...