padding会增加元素总宽度，因为默认box-sizing为content-box：width仅指内容区，padding和border额外叠加，如width:200px;padding:10px时实际宽为220px。
padding 会增加元素总宽度，因为默认 box-sizing 是 content-box
设置 padding 后 div 实际变宽，不是 bug，而是 CSS 默认盒模型的正常行为。关键在于：默认情况下 box-sizing: content-box，此时 width 只控制内容区宽度，padding 和 border 都额外加在内容区外面。
比如：width: 200px; padding: 10px; → 实际占用水平空间是 200 + 10 + 10 = 220px（左右内边距各算一次）。
- 这个计算适用于所有现代浏览器（Chrome/Firefox/Safari/Edge），不是 IE 兼容问题
-
margin不影响元素自身尺寸，只影响它和兄弟/父容器的距离 - 如果父容器刚好是
width: 200px，子div设了padding就会溢出——这是最常见的布局断裂原因
box-sizing: border-box 能让 width 包含 padding
想让 width: 200px 表示“整个盒子最外沿到最外沿的宽度”，就用 box-sizing: border-box。这时 padding 和 border 会被压缩进设定的 width 内部，内容区自动变窄。
例如：width: 200px; padding: 10px; border: 1px solid; box-sizing: border-box; → 总宽度仍是 200px，内容区只剩 200 - 10 - 10 - 1 - 1 = 178px 宽度可用。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明，全局重置推荐写在
* { box-sizing: border-box; } - 旧版 IE（IE6–7）不支持
box-sizing，但它们已退出主流支持范围 -
box-sizing不影响margin，外边距永远额外计算
实际调试时怎么快速确认当前 width 是否包含 padding
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里看 computed 栏下的 width 和 padding 值，再对照 box-sizing 的当前值就能判断。
- 如果
box-sizing显示为content-box，且 computedwidth是 200，但元素实际占位超过 200，那多出来的就是padding+border - 如果
box-sizing是border-box，computedwidth仍为 200，但 content area 宽度会明显小于 200（可看 Layout 面板里的 content 区域尺寸） - 不要只看 Elements 面板里写的 style，computed 才是最终生效值
为什么有时候 padding 看似没生效？
常见错觉来源：父容器用了 overflow: hidden 或 flex/grid 的收缩行为，把超出部分裁掉了，导致你以为 padding 没起作用。
- 在 flex 容器中，子项默认
flex-shrink: 1，可能把 padding 挤压变形，需加flex-shrink: 0或明确设min-width - 用
display: inline-block时，vertical-align和行高会影响视觉对齐，让人误判 padding 效果 - 百分比
padding（如padding-top: 10%）是相对于父容器宽度计算的，不是自身宽度——这点极易被忽略
实际布局中，box-sizing: border-box 几乎是现代项目的标配，但理解 content-box 下的原始计算逻辑，才能真正看清 overflow、flex 换行、响应式断点等场景里 padding 到底在动哪块尺寸。
