加padding是把内容往里“撑开”，使空白属于元素自身并显示背景色；加margin是把整个元素往外“推远”，空白透明且只影响与其他元素的距离。
别记口诀，直接看效果：加 padding 是把内容往里“撑开”，加 margin 是把整个元素往外“推远”。选错一个，背景色跑偏、间距塌陷、父容器莫名下移——全是常见现场。
什么时候该用 padding？
核心判断：你希望空白区域显示背景色、边框或阴影，且这个空白属于“元素自身的一部分”。
- 按钮文字离边框太近？加
padding—— 背景色会自然延伸进去 - 卡片内容紧贴边框？
padding让它呼吸，同时保留卡片的border和background - 行内元素（如
span）需要上下留白？padding-top/padding-bottom有效（但注意：它可能溢出到相邻行，line-height更稳妥） -
padding值不能为负；设了padding后若元素有固定宽高，记得从宽高中减掉对应值，否则会撑大
什么时候该用 margin？
核心判断：你只想拉开“这个元素”和“其他元素”的距离，不希望影响自身背景、边框，甚至想让它脱离文档流（比如负 margin）。
- 两个
div上下挨得太紧？用margin-bottom控制间距——此时它们之间的空白是透明的，父容器背景可见 - 让块级元素水平居中？
margin: 0 auto是最简方案（前提是宽度固定） - 需要微调位置又不想改结构？负
margin可以“拉回”元素（margin-left: -10px），padding不支持负值 - 注意：垂直方向相邻块级元素的
margin-top和margin-bottom会折叠（取较大值），不是相加；水平方向则正常相加
为什么给子元素加 margin-top，父元素会一起往下掉？
这是经典的 margin 折叠（collapsing margins）现象：当父元素没 border、没 padding、没 inline content、没触发 BFC 时，子元素的上外边距会“穿透”父元素顶部，作用到父元素和其上一个兄弟元素之间。
立即学习“前端免费学习笔记（深入）”；
- 快速修复：给父元素加
border-top: 1px solid transparent或padding-top: 1px - 更通用解法：给父元素设置
overflow: hidden（触发 BFC） - 别用
margin-top推父容器本身——那是语义错误；真要控制父容器位置，应该操作它的父级，或改用padding-top在容器内部留空
行内元素对 padding 和 margin 的响应很怪？
没错。行内非替换元素（如 span、a）只尊重左右方向的 padding 和 margin；上下 padding 会渲染，但不影响行高；上下 margin 则完全无效（不参与布局计算）。
- 想让
span上下有视觉间距？优先调line-height或包一层inline-block容器再设padding -
margin对行内元素只有margin-left/margin-right生效；margin-top/margin-bottom写了也白写 - 如果必须用上下外边距，把它变成
display: inline-block，这时所有方向margin都可用
真正难的不是记住区别，而是看到一个错位的间距时，能立刻判断：这空隙属于“里面”还是“外面”——前者查 padding 和背景，后者查 margin 和折叠。浏览器开发者工具里点开盒模型图，一眼就能验证。
