padding导致内容溢出是因为box-sizing默认为content-box，此时width/height不包含padding，使总尺寸超出容器；改用border-box可解决，但需先确认是否为盒模型问题而非布局、文本流或渲染层原因。
为什么 padding 会让元素内容溢出容器
默认的 box-sizing 是 content-box，此时设置的 width 和 height 只算内容区尺寸，padding 和 border 会额外加在上面。比如 width: 200px; padding: 20px;，实际占用宽度就是 240px，超出父容器时就会溢出。
常见于固定宽高的卡片、表单输入框、导航栏子项等场景，尤其当父容器用 flex 或 grid 布局且未预留空间时更明显。
用 box-sizing: border-box 强制重定义尺寸范围
把 box-sizing 设为 border-box 后，width 和 height 就包含 padding 和 border，不再“额外膨胀”。这是最直接有效的解法。
- 推荐全局重置：
*, *::before, *::after { box-sizing: border-box; } - 单独设置也行：
.card { width: 300px; padding: 16px; box-sizing: border-box; } - 注意：IE8+ 支持
box-sizing，但旧版 IE 需加-webkit-box-sizing和-moz-box-sizing前缀（现代项目通常可忽略）
padding 溢出还可能是其他原因导致的
box-sizing: border-box 解决不了所有“看起来像 padding 溢出”的问题，要排查以下情况：
立即学习“前端免费学习笔记（深入）”；
- 子元素设置了
width: 100%，但父元素有padding，导致子元素撑满父容器内容区后仍被 padding 挤出——这时应改用width: 100%;+box-sizing: border-box，或让子元素用margin替代父元素padding - 文本或内联元素存在空白符（空格、换行），触发
white-space: normal下的折行/间隙，误判为溢出——可尝试font-size: 0父容器再重设子元素字号 - 使用了
transform: scale()或zoom，放大后 padding 区域视觉溢出，实际布局未变——需结合overflow或调整缩放基准
flex / grid 容器里 padding 溢出的特殊处理
在 display: flex 或 display: grid 的父容器中，子项即使用了 box-sizing: border-box，仍可能因主轴尺寸计算方式出问题：
- 子项设了
flex: 1但同时有padding，而父容器没设min-width: 0，会导致 flex 项不收缩——加min-width: 0或min-height: 0即可 - grid 子项设
width: 100%+padding，但网格轨道本身没留足空间——优先用grid-template-columns: 1fr而非固定像素，或改用justify-items: stretch - 避免对 flex/grid 子项同时设
width和flex，容易触发尺寸冲突
box-sizing 解决；得先确认是盒模型膨胀，还是布局逻辑、文本流或渲染层的问题。盲目加 box-sizing: border-box 可能掩盖真实矛盾。 
