为什么给div加上宽度之后，我再加上padding左右两边的值，div的width再审查元素没有变？

发布于
2017-10-07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: red;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

图片描述

设置了300px的宽度，加上padding不是应该有340px吗？为什么审查元素div的width没有变，而实际样子变了?

html css

阅读 3.1k

3 个回答

CRIMX

✓ 已被采纳

觉得有三个地方可以理清一下：

你截图的地方，是 Styles 标签，代表的是样式的来源，比如你写的 styles 就是 author styles，这个值是静态的，所以你写的 width: 300px 会出现在这里。
Styles 标签旁边还有一个 Computed 标签，这里面的值是动态的，你会看到 width 还是 300px，因为并没有其它地方影响 width 这个属性。（可以在这里点开 width 的项目查看影响这个值的来源）
你标题的 width 应该是指这个盒子的宽度，跟 width 属性是不一样的，后者影响的是 content box 的宽度。你用鼠标审查就可以看到盒子的 border box 宽度出现在盒子的旁边（Ctrl+Shift+C 或者 Cmd+Shift+C）。