根本原因是默认盒模型为content-box，padding和border不包含在设置的width/height内，而是额外增加；加padding后总尺寸=内容区+2×padding。
设置了 width 和 height，但元素实际占位变大了，根本原因在于：默认盒模型（box-sizing: content-box）下，padding 和 border 都不包含在你写的宽高内，而是额外加在内容区域之外。也就是说，你设的是“内容区”的尺寸，不是整个盒子的尺寸。
padding 为什么会撑开盒子
当你给一个已明确设置 width: 200px; height: 100px; 的元素加上 padding: 20px;，浏览器会这样计算：
- 内容区仍保持 200×100px
- 左右各加 20px padding → 总宽度增加 40px
- 上下各加 20px padding → 总高度增加 40px
- 最终渲染尺寸变成 240×140px
这个“撑开”是默认行为，不是 bug，而是 W3C 标准盒模型的设计逻辑。
什么时候 padding 不会撑开盒子
两种常见情况下，padding 看似没撑开：
立即学习“前端免费学习笔记（深入）”；
- 元素没设 width/height：比如块级元素未指定宽度，它会自动占满父容器；此时加 padding，宽度不变（仍是父宽），但高度可能被撑开（尤其设了固定 height 时）
-
用了
box-sizing: border-box：此时你写的width包含内容 + padding + border，padding 不再外扩，而是压缩内容区来腾出空间
如何避免 padding 撑大布局
有三种实用方式：
-
统一设置
box-sizing: border-box（推荐）：在 CSS 开头加* { box-sizing: border-box; }，从此所有元素的宽高都按“总尺寸”理解 -
手动减去 padding 值：比如要总宽 200px、padding 左右共 30px，就写
width: 170px;—— 易出错，维护成本高 - 用 max-width / max-height 控制上限：适合响应式场景，防止意外溢出
注意 inline 元素的特殊情况
- 水平方向（left/right）padding 有效，且会影响行框宽度
- 垂直方向（top/bottom）padding 虽然渲染可见，但通常不参与行高计算，也不会把相邻行挤开 —— 它只是“视觉上凸起”，容易造成重叠
