padding是内容到边框的距离，影响自身尺寸和背景显示；margin是边框到邻元素的距离，不参与自身渲染；box-sizing控制padding是否撑大元素，border-box为现代开发首选。
padding 是内容到边框的距离，影响自身尺寸和背景显示
当你给一个 div 设置 padding: 20px，实际效果是：文字或子元素离上下左右边框各空出 20px；同时，如果这个 div 原本设了 width: 100px，在默认 box-sizing: content-box 下，它最终占位宽度就变成 140px（+左右 padding 各 20px）。更关键的是：这部分空白区域会显示父级的背景色、背景图，甚至边框——因为它属于元素“内部”。
- 常用场景：按钮文字不贴边、卡片内容呼吸感、输入框内留白
- 注意：百分比值的
padding（如padding: 5%）始终基于父容器的 宽度 计算，哪怕用在padding-top - 兼容性无风险，但 IE8 及更早版本不支持
inherit值
margin 是边框到隔壁元素的距离，不参与自身渲染
margin 是真·外部空间：它不带背景、不响应 hover、不触发点击，纯粹用来“推开”其他元素。比如两个相邻 div 各自设了 margin-bottom: 20px 和 margin-top: 15px，它们之间实际距离不是 35px，而是取较大值——20px。这就是经典的「外边距合并（margin collapse）」，只发生在垂直方向的块级兄弟元素之间。
- 典型用法：
margin: 0 auto实现块级元素水平居中（需有明确width） - 负值合法：
margin-left: -10px可用于微调重叠或对齐 - 行内元素（如
span）的margin-top/bottom无效，仅左右 margin 生效
box-sizing 是控制 padding 是否“撑大”元素的关键开关
标准盒模型下，width 和 height 只管内容区，padding 和 border 额外加在上面；而 box-sizing: border-box 把 padding 和 border “塞进”设定的宽高里——这才是现代开发最常用的模式。
div {
width: 200px;
padding: 20px;
box-sizing: content-box; /* 实际宽度 = 240px */
}
div {
width: 200px;
padding: 20px;
box-sizing: border-box; /* 实际宽度 = 200px，内容区被压缩 */
}- 建议全局重置：
* { box-sizing: border-box; }（注意性能轻微影响，但利远大于弊） -
margin不受box-sizing影响，永远在盒子外面
别混淆 margin/padding 的“方向逻辑”和“合并行为”
两者语法结构完全一致（margin: a b c d / padding: a b c d），都是顺时针上右下左；但行为天差地别：padding 永远不会合并，margin 在特定条件下会自动“折叠”。这导致很多布局 bug 看似是 padding 写错了，其实是 margin 合并后间距变小了。
立即学习“前端免费学习笔记（深入）”；
- 排查技巧：用浏览器开发者工具「Computed」面板看实际生效的 margin 值，对比你写的和浏览器计算的是否一致
- 想禁用垂直 margin 合并？给父容器加
overflow: hidden或padding: 0.1px（非语义 hack，慎用） - 移动端适配时，优先用
rem或%控制 padding，用固定像素控制 margin 更易维护
真正容易被忽略的，是 margin 合并这个“隐形规则”——它不报错、不警告，只默默改变间距，而且只在某些 DOM 结构下触发。调试时盯着 computed 样式看 margin 值，比反复改代码更快定位问题。
