用 padding 替代 margin 能阻止塌陷，因为塌陷只发生在块级流中相邻的 margin 之间，而 padding 属于盒模型内部空间，不参与 margin 合并；父元素加 padding-top 后，子元素 margin-top 不再与父边界接触，从而避免合并。
用 padding 替代 margin 为什么能阻止塌陷
因为塌陷只发生在「块级流中相邻的 margin」之间，而 padding 属于盒模型内部空间，不参与 margin 合并。父元素加 padding-top，相当于在内容区上方“垫高”了一层，子元素的 margin-top 就不再与父元素边界接触，自然无法合并。
padding 替代方案的实际写法和取舍点
核心是把原本写在子元素上的 margin-top 拆出来，挪到父元素的 padding-top 上，并将子元素的 margin-top 设为 0：
- 父元素设
padding-top: 20px，子元素设margin-top: 0 - 若父元素有背景色且不希望 padding 区域也显示背景，加
background-clip: content-box - 若父元素高度固定（比如
height: 200px），加了padding会撑高整体尺寸；此时必须配合box-sizing: border-box，否则内容区会被压缩 - 这个方法对语义无侵入，也不改变文档流，适合卡片、表单容器等需要稳定内边距的场景
容易忽略的兼容性和视觉副作用
虽然 padding 方案简单，但几个细节常被跳过：
-
padding会增加父容器的offsetHeight，影响 JS 获取高度或与其他元素对齐——不是“看不见”就等于“没影响” - 如果父元素用了
background-image或渐变，background-clip: content-box必须显式声明，否则图片会铺满整个 padding 区 - 兄弟元素之间仍可能塌陷：这个方案只解决父子塌陷，兄弟间
margin-bottom/margin-top还得单独处理（比如统一只用margin-bottom） - 移动端缩放时，1px
padding可能被渲染为半像素，导致模糊；建议用padding-top: 0.0625rem（即 1px 在 16px 基准下）更稳妥
什么时候不该用 padding 替代
不是所有场景都适合硬切：
立即学习“前端免费学习笔记（深入）”；
- 父容器本身是语义化结构（如
<article>、<section>），加padding会污染语义，此时display: flow-root更干净 - 需要响应式间距（比如小屏用
12px，大屏用24px），padding需要配合媒体查询，不如用margin+ BFC 触发器灵活 - 父元素已存在
border或outline，再加padding可能导致视觉节奏错乱，此时直接overflow: hidden更轻量
真正难的不是选哪个方案，而是每次写 margin 前，先问一句：这个间距，到底该属于“元素之间”，还是“容器内部”？
