padding导致外层容器“撑爆”是因box-sizing: content-box下padding被计算在width/height之外，且父容器无尺寸约束；解决需全局设box-sizing: border-box、用flex/gap替代、或父容器加max-height/overflow控制。
为什么 padding 会让外层容器“撑爆”
这不是 padding 本身的问题，而是盒模型计算方式和父容器尺寸约束共同作用的结果。当一个子元素设置了 padding（比如 padding: 200px），而它的父容器又没设 height 或 max-height，浏览器会按内容高度自然撑开父容器——看起来像“撑爆”，其实是父容器忠实地响应了子内容的尺寸需求。
更隐蔽的情况是：父容器用了 width: 100% 或 flex 布局，但子元素的 padding + 内容宽度超出了可用空间，触发了横向溢出或换行错位，视觉上也像“爆了”。
用 box-sizing: border-box 真正控制尺寸边界
默认的 box-sizing: content-box 把 padding 和 border 算在 width/height 之外，这是“撑爆”的根源。
解决方法就是统一重置：
* {
box-sizing: border-box;
}
这样所有元素的 width 和 height 都包含 padding 和 border，不会再意外超出设定值。
- 必须写在全局 CSS 最前面，否则被后续规则覆盖就失效
- 对
textarea、input[type="search"]等表单控件也生效，注意它们原有内边距可能变小，需额外微调 - 不要只给某几个 class 加，否则嵌套时边界逻辑不一致，反而更难调试
父容器加 max-height / overflow 控制溢出行为
当子元素 padding 大且不可删（比如设计强制要求大留白），又不能改盒模型时，靠父容器截断或滚动更实际。
常见组合：
-
max-height: 400px; overflow-y: auto;—— 限制高度，内容多时出现滚动条 -
height: 400px; overflow: hidden;—— 强制裁剪，适合卡片类固定高容器 -
min-height: 400px; overflow: visible;—— 允许向上/向下延展，但保底高度不塌
⚠️ 注意：overflow: hidden 会同时裁掉 box-shadow、position: absolute 子元素的溢出部分，调试时容易误判为“消失”
用 flex 或 grid 替代纯 padding 布局留白
如果 padding 只是用来制造间距，而不是语义上的“内边距”，那它本就不该承担布局职责。
现代布局中更可控的方式：
- 用
display: flex+gap: 20px替代子元素各自设margin或靠padding推位置 - 用
display: grid+grid-template-rows: 1fr 20px 1fr显式定义空白轨道 - 把大 padding 拆成独立 spacer 元素：
<div class="spacer" style="height: 200px"></div>，语义清晰、尺寸可单独控制
这些方式不会改变盒模型尺寸计算，也不会因嵌套层级加深而累积不可控的 padding 影响。
真正麻烦的不是 padding 本身，而是把它当成“万能留白工具”混用在结构、样式、布局三层里。一旦嵌套变深，哪个 padding 在撑谁、撑多少，光靠眼睛看 DOM 几乎没法判断。用 box-sizing: border-box 打底，再按场景选 flex/gap 或 max-height 控制，比反复调 padding 数值靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
