根本原因是默认盒模型为content-box，padding和border不包含在设置的width/height内，而是额外增加；加padding后总尺寸=内容区+2×padding。
设置了 width 和 height，但元素实际占位变大了，根本原因在于：默认盒模型（box-sizing: content-box）下，padding 和 border 都不包含在你写的宽高内，而是额外加在内容区域之外。也就是说，你设的是“内容区”的尺寸，不是整个盒子的尺寸。
当你给一个已明确设置 width: 200px; height: 100px; 的元素加上 padding: 20px;，浏览器会这样计算：
这个“撑开”是默认行为，不是 bug，而是 W3C 标准盒模型的设计逻辑。
两种常见情况下，padding 看似没撑开：
立即学习“前端免费学习笔记（深入）”；
box-sizing: border-box：此时你写的 width 包含内容 + padding + border，padding 不再外扩，而是压缩内容区来腾出空间有三种实用方式：
box-sizing: border-box（推荐）：在 CSS 开头加 * { box-sizing: border-box; }，从此所有元素的宽高都按“总尺寸”理解width: 170px; —— 易出错，维护成本高行内元素（如 <a></a>、<span></span>）加 padding：
以上就是css设置了宽高但实际变大了为什么_掌握padding对盒模型的影响的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
568
收藏
取消收藏
