padding是内容到边框的距离，影响背景和自身尺寸；margin是边框到邻居的距离，透明且不撑大自身。判断依据：留白需背景则用padding，需透明间隙则用margin。
padding 是内容到边框的距离，影响背景和自身尺寸
当你给一个 div 加了 background-color 和 padding，那块留白是“有颜色的”——它属于元素内部，背景会自然铺满。比如：
div {
width: 100px;
padding: 15px;
background: #ffeb3b;
border: 2px solid #333;
}
此时内容区宽高仍是 100px，但整个盒子实际占宽是 100 + 15×2 + 2×2 = 134px（默认 box-sizing: content-box）。这容易导致父容器溢出或响应式错位。
- padding 只能设正值，不能为负
- 按钮文字离边框太近？加
padding就对了 - 设置了
border-radius，又想圆角内留白？padding才生效，margin不管用
margin 是边框到邻居的距离，透明且不撑大自身
margin 永远是“空的”：没有背景、不继承父级样式、不会让 width 或 height 计算变大。它只决定这个盒子“站哪儿”、“离别人多远”。
典型误操作：两个 p 标签分别设 margin-top: 20px 和 margin-bottom: 20px，结果垂直间距只有 20px——因为块级元素上下 margin 会合并（collapse），取较大值。
立即学习“前端免费学习笔记（深入）”；
- 想水平居中一个块级元素？用
margin: 0 auto - 需要微调位置重叠？
margin支持负值，margin-left: -10px合法，padding不行 - 相邻元素间距“没反应”？先检查是否触发了 margin 合并
怎么一眼分清该用哪个？看背景要不要跟着延展
这是最快速、最不容易出错的判断方式：
- 你希望留白区域显示当前元素的背景色或图片 → 用
padding - 你只想拉开两个独立模块的距离，且中间必须“透出底下内容” → 用
margin
例如卡片列表：每张卡有自己的阴影和背景，卡与卡之间要留空——这个空必须透明，否则背景会连成一片。这时用 margin-bottom: 16px；而卡片内部标题和正文之间要呼吸感？那是 padding 的活儿。
box-sizing: border-box 能帮你少踩一半坑
默认盒模型下，padding 和 border 都会额外增加元素尺寸，导致宽度计算混乱。全局重置可大幅降低出错率：
* {
box-sizing: border-box;
}
之后再写 width: 200px; padding: 16px;，元素总宽还是 200px，padding 从内容区里“挤”出来，而不是往外“撑”。但注意：margin 始终不受 box-sizing 影响——它永远在盒子外面。
真正难的不是记定义，而是面对一个具体布局时，下意识去想：“这块空白，是我盒子的一部分，还是我跟别人之间的空隙？”——答案决定了你是敲 padding 还是 margin。