CSS设置盒子宽高实际值为设置值的两倍

用CSS设置盒子宽高，在浏览器中实际变成原来设置值的两倍，用F12检查后发现盒子的值还是设置值，但是就是用标尺去量宽高是设置值的两倍，恳求各位解惑。

<style>
        div{
            height: 500px;
            width: 500px;
            background-color: #ff8500;
            margin: 50px;
            padding: 40px;
        }
        span{
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: #fff;
            margin: 40px;
            border:2px solid green;
        }
    style>

可能是因为你的浏览器缩放比例不是100%导致的。可以尝试在浏览器中按下 Ctrl+0（Windows）或 Command+0（Mac）来还原浏览器缩放比例到100%。如果问题依然存在，可以尝试在其他浏览器或设备上查看。

可能是因为在设置盒子宽高时没有考虑盒子的内边距(padding)和边框(border)的影响。在CSS中，盒子的实际宽度和高度包括内容区域、内边距和边框，而不是仅仅指内容区域的宽度和高度。

因此，在上面的代码中，设置的盒子的实际宽度和高度为500px+40px(padding)*2+2px(border)*2=584px，而不是500px。如果要设置盒子的内容区域的宽度和高度为500px，可以使用box-sizing属性将盒子的盒模型设置为border-box，如下所示：
div { box-sizing: border-box; height: 500px; width: 500px; background-color: #ff8500; margin: 50px; padding: 40px; }
这样设置后，盒子的实际宽度和高度就是设置值的500px，而不是584px了。