div下面有img,默认border: 2px solid transparent;hover变色的时_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

问题

需求：默认border: 2px solid transparent;hover变色

如何不让图片的div抖动(变大)
第一个会抖，第二个不会，不知道为什么，难道是图片色

抖动

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100%;
            width: 100%;
            display: flex;
            background-color: #f5f5f5;
            padding-top: 20px;
            padding-left: 20px;
        }

        .box-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 190px;
            height: 240px;
            box-sizing: border-box;
            border: 2px solid transparent;
            margin-right: 20px;
            margin-bottom: 20px;
            font-size: 0;
        }

        .box-item:hover {
            border: 2px solid blue;
        }

        img {
            width: 186px;
            height: 236px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-item">
            <img src="/uploads/allimg/210418/15011G550-1.png"
                alt="">
        </div>
        <div class="box-item">
            <img src='/uploads/allimg/210418/15011K453-2.png'
                alt="">
        </div>
    </div>
</body>

</html>

###

说实话我没看出来抖...

###

把

box-sizing: border-box;

这句注释掉是不是看起来不变大了

###

说实话，没看出来抖动，css是没问题的，或者你可以在codepen.io上复现一下？

###

阿这..不抖啊..给你两张尺寸一样的图试试？

###

并没有, 怀疑下面的border导致的错觉, 建议给.box换一个深色的background-color再观察看一下吧

 .box-item {
            border: 2px solid transparent;
            }

###

应该是 `
border 影响的