padding百分比基于包含块宽度计算，非父元素内边距或自身内容宽；不继承；重置需谨慎；Flex/Grid中需box-sizing:border-box。
padding 值写成百分比却没按预期缩放
百分比 padding 是相对于**包含块的宽度**计算的，不是父元素的内边距或自身内容宽。比如 padding: 10% 在窄容器里可能小得看不见，在宽屏下又撑出巨大空白，导致布局“突然错位”。
- 检查父容器是否设置了固定宽/响应式宽，
max-width或flex布局会影响包含块判定 - 若需按高度缩放，CSS 不原生支持（
padding-bottom: 10%仍按宽度算），改用aspect-ratio+padding-top模拟，或 JS 动态计算 - 调试时临时加
outline: 1px solid red看真实盒模型边界，比依赖浏览器开发者工具的高亮更准
子元素继承了不该有的 padding
padding **不继承** —— 这是常见误解。你看到的“继承效果”，其实是父元素 padding 把子元素整体往外推，或者子元素用了 margin 但触发了外边距合并（margin collapse），看起来像“被撑开”。
- 用浏览器开发者工具逐层检查：点中子元素 → 右侧“Computed”标签页 → 找
padding行，值为0px就说明没继承 - 如果父元素有
padding且子元素是display: block，它会紧贴父元素内边距起始位置，这是正常流式布局行为，不是 bug - 想让子元素“无视”父 padding 占位，可用
position: absolute配合top/left，但要确保父元素有position: relative
重置 padding 后按钮/输入框样式崩了
全局写 * { padding: 0 } 或 button, input { padding: 0 } 很危险：原生控件依赖默认 padding 实现可点击区域、文字垂直居中和跨浏览器一致性。
- Chrome/Firefox 对
的默认padding是1px 6px左右，清零后文字会顶到边缘，iOS 上点击热区变小 - 更安全的做法是只重置你需要控制的容器类，例如：
.card { padding: 1rem }，而不是泛化选择器 - 如必须统一表单控件内边距，用
all: unset+ 手动补全padding、border、line-height等关键属性，否则 Safari 可能渲染异常
.form-control {
all: unset;
padding: 0.375rem 0.75rem;
border: 1px solid #ced4da;
line-height: 1.5;
font-size: 1rem;
}Flex/Grid 容器里 padding 导致子项换行或溢出
当父容器设了 padding 且子项用 flex: 1 或 grid-template-columns: 1fr 时，可用空间 = 容器宽 − 左右 padding，但子项若未设 box-sizing: border-box，其自身 padding 和 border 会额外增加尺寸，直接突破容器限制。
立即学习“前端免费学习笔记（深入）”；
- 所有参与 Flex/Grid 布局的直系子元素，务必加
box-sizing: border-box - 避免在 Flex 容器上同时设
padding和gap，二者叠加容易超限；优先用gap控制子项间距，padding只用于容器内部留白 - 调试时临时把父容器
padding改为background: rgba(0,0,0,0.1)，能直观看出 padding 区域是否挤压了子项空间
真正难处理的是嵌套多层 padding + scrollbar + transform 的组合场景——这时候浏览器对盒模型的计算会有微小差异，建议用 calc() 显式减去已知 padding 值，别依赖自动收缩。
