CSS中padding是内容与边框间的内部空隙，影响元素尺寸且背景覆盖；margin是边框与外部元素间的外部空隙，不改变尺寸、透明且会合并。
先看盒子结构，定位“谁和谁之间”
每个HTML元素都是一个盒子，从里到外依次是：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。关键就看“空隙”在哪个位置：
• padding 是内容和边框之间的空隙，属于盒子“内部”；
• margin 是边框和隔壁元素（或父容器边界）之间的空隙，属于盒子“外部”。
记一句口诀：内距垫内容，外距推邻居。
看背景要不要延伸过去
这是最直观的区分方式：
• 如果你希望空白区域显示元素自身的背景色或背景图，就用 padding —— 它被背景完全覆盖；
• 如果空白区域必须透明、不能有背景（比如两个卡片之间留白，但各自背景不能连过去），就用 margin —— 它永远透明，不继承父级背景。
看是否影响自身尺寸和相邻布局
padding 会撑大元素的实际宽高（默认 content-box 模式下）；
margin 不改变自身尺寸，只影响它和别人的位置关系。
还要特别注意：
• 垂直方向上，相邻块级元素的 margin 会合并（比如 div1 的 margin-bottom=20px，div2 的 margin-top=15px，实际间距只有 20px）；
• padding 则不会合并，父子或兄弟间的 padding 都各自生效、累加。
按用途快速选对属性
遇到具体场景，直接对应选择：
• 给按钮文字留呼吸感，让文字离边框远一点 → padding
• 让两个栏目模块上下分开，互不粘连 → margin
• 实现块级元素水平居中 → margin: 0 auto（仅对设了 width 的块级元素有效）
• 清除段落、标题自带的默认间距 → 重置 margin（如 p, h1–h6, body）
• 希望响应式缩放时边距也等比变化 → 优先用 rem 或 % 单位设 padding/margin
