padding往里撑、影响自身尺寸和背景显示，margin往外推、不影响自身宽高；需背景延伸用padding，仅调间距用margin。
padding 是往里“撑”，margin 是往外“推”
直接说结论：如果你希望背景色、边框或阴影延伸到空白区域，用
；如果只是想让这个元素和隔壁元素离远点/近点，不改变自身视觉尺寸，就用
。
常见错误现象：
• 给按钮加了
，结果宽度超出了父容器——因为默认
，
会额外加在
上；
• 两个
标签上下各设
和
，结果间距只有 20px 而不是 40px——这是垂直
合并（collapsing）。
在 border 内侧，会显示背景色/图，影响元素总尺寸
在 border 外侧，完全透明，不影响自身宽高，但控制与其他元素的距离
负
合法（比如
可微调位置），负
无效（
浏览器
会忽略）
什么时候必须用 padding，什么时候只能用 margin
看使用场景比记定义更管用：
让文字离按钮边框更舒服、让图标和文字之间有呼吸感 → 用
（背景/边框需覆盖该区域）
让一个卡片和上一个模块空出 32px 间距 → 用
或
（不希望卡片自身变大）
想让块级元素水平居中 →
（只对设置了
的块级元素有效）
清除浏览器默认样式干扰 →
、
（别依赖
去“抵消”默认
）
box-sizing 改变 padding 的行为逻辑
默认的
下，
实际占宽是
。这常导致响应式断点错乱。
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
更可控的做法是全局重置：
这样
和
就被“包进”设定的
里，
就真等于 200px 宽（内容区只剩 168px）。
是现代布局的事实标准，尤其配合 Flex/Grid 时几乎必开
不受
影响，永远在盒子外部
注意：表单控件（如
）在某些浏览器中默认是
，需显式设置
垂直 margin 合并是真实存在的坑
相邻块级元素的上下
不叠加，而是取较大值。例如：
AB 之间实际间距是
，不是
。这不是 bug，是 CSS 规范明确规定的。
合并只发生在块级流内（非浮动、非
绝对定位
、非 flex item）
父子间也可能合并（如父元素无 border/padding，子元素
会“冒泡”到父元素外边）
规避方法：给父元素加
或
实际写页面时，
和
往往要一起用，但它们的职责边界很清晰：一个管“内部舒适度”，一个管“外部关系”。混淆二者最常导致的问题不是样式错，而是后期改一处牵动全局——比如把本该用
的模块间距改成
，结果所有背景、阴影、圆角都得跟着重调。
paddingmarginpadding: 12pxbox-sizing: content-boxpaddingwidthmargin-bottom: 20pxmargin-top: 20pxmarginpaddingmarginmarginmargin-left: -10pxpaddingpaddingmargin-topmargin-bottommargin: 0 autowidthbody { margin: 0; }p, h1-h6 { margin: 0; }paddingmarginbox-sizing: content-boxwidth: 200px; padding: 16px;200 + 16×2 = 232px*, *::before, *::after {
box-sizing: border-box;
}paddingborderwidthwidth: 200px; padding: 16px;border-boxmarginbox-sizingcontent-boxmarginA
B30px50pxmargin-toppadding-top: 1pxborder-top: 1px solid transparentpaddingmarginmarginpadding