会撑大元素。默认 content-box 下，width/height 仅指内容区，padding 会额外增加总尺寸；设为 border-box 后，padding 被包含在宽高中，不再撑大元素。
padding 会撑大元素吗？取决于 box-sizing
默认情况下，padding 会撑大元素的最终尺寸。这不是“bug”，而是 CSS 默认盒模型（content-box）的定义行为：元素的 width 和 height 仅指内容区大小，padding、border、margin 都额外叠加在它外面。
常见错误现象：div { width: 200px; padding: 20px; } → 实际占用宽度是 240px（200 + 左右各 20），导致布局错位或超出父容器。
- 这是标准行为，不是浏览器差异
- Flex/Grid 容器中的子项也受此影响，除非显式重设
box-sizing - 重置全局盒模型是行业通用做法：
*, *::before, *::after { box-sizing: border-box; }
box-sizing: border-box 是怎么改变 padding 行为的？
设置 box-sizing: border-box 后，width 和 height 指的是“边框边缘总尺寸”，即包含 content + padding + border。此时 padding 不再撑大元素，而是从设定的宽高中“挤占”内容区域。
例如：
div {
width: 200px;
padding: 20px;
box-sizing: border-box;
} → 元素总宽仍是 200px，内容区实际只有 160px（200 − 左右 padding 各 20）。
-
margin始终不参与盒尺寸计算，无论box-sizing如何 -
border在border-box下计入宽高，需预留空间或设为0避免意外溢出 - 注意：IE8+ 支持该属性，无需前缀
为什么 flex item 默认不被 padding 撑出容器？
当元素是 Flex 子项时，即使未设 box-sizing: border-box，padding 有时看起来“没撑大”——这其实是 Flex 的 min-width: auto 默认行为在起作用：它会阻止子项收缩到小于其内容 + 内边距的尺寸，但不会主动扩大父容器。
立即学习“前端免费学习笔记（深入）”；
真正关键点在于父容器是否设置了明确宽高，以及是否启用了 flex-wrap: wrap 或 overflow 处理。
- 若父容器
width: 300px，两个width: 150px; padding: 20px的 flex item 在row下仍会换行（因每个实际占 190px） - 用
flex-basis替代width时，同样受box-sizing控制 - 调试技巧：在 DevTools 中勾选“Show Box Model”可直观看到 content/padding/border 区域
容易忽略的 padding 影响点
很多人只关注宽高，却忽略了 padding 对其他样式属性的隐性干扰：
-
background-color和background-image会铺满 padding 区域（除非用background-clip: content-box限制） -
cursor: pointer在 padding 区域内也生效，但click事件目标仍是元素本身，不影响事件委托逻辑 - 表单控件（如
input[type="text"]）默认有 UA 样式 padding，重置时需一并处理，否则文字贴边或截断 - 使用
rem或em设定 padding 时，会随父级字体大小缩放，可能造成响应式断点偏移
