标准盒模型下，元素总宽度为width+padding+border+margin；设置box-sizing: border-box后，width包含padding和border，padding不再增加总宽度。
在CSS盒模型中，元素的总宽度由 width、padding、border 和 margin 共同决定。你问的是 width 与 padding 如何计算，重点在于理解盒模型的类型。
在这种模型下：
立即学习“前端免费学习笔记（深入）”；
例如：
.box {
width: 200px;
padding: 10px;
border: 5px solid #000;
}
这个元素在页面中实际占据的宽度是：
200（width） + 10（左内边距） + 10（右内边距） + 5（左边框） + 5（右边框） = 230px
在这种模型下：
立即学习“前端免费学习笔记（深入）”；
同样的例子，但加上 box-sizing:
.box {
width: 200px;
padding: 10px;
border: 5px solid #000;
box-sizing: border-box;
}
此时元素总宽度就是 200px，内容区域会被压缩为：200 - 10 - 10 - 5 - 5 = 170px
现代开发中，很多开发者喜欢全局设置：
*, *::before, *::after {
box-sizing: border-box;
}
这样可以让 width 更直观——你设成 200px，它就在页面上占 200px，不用担心 padding 把布局撑开。
基本上就这些。关键记住：默认情况下 padding 会增加总宽度，除非用了 box-sizing: border-box。
以上就是css盒模型width与padding如何计算的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
750
收藏
