该用padding而非margin时：需内容与边框留空、背景/阴影延伸至留白区、扩大点击热区或避免垂直margin合并；必须用margin时：控制元素间距、实现水平居中（margin:0 auto）、使用负值外推或绕过父容器限制。
什么时候该用 padding 而不是 margin
当你想让内容“呼吸”、背景色/图延伸到留白区域，或需要扩大可点击区域时，用 padding。
- 按钮文字紧贴边框？加
padding—— 它会让文字离边框有空隙，且按钮背景自动填满这片区域 - 卡片内容贴着边框太拥挤？
padding是唯一能同时撑开内部空间 + 保持背景连续性的选择 - 输入框文字顶着边框？
padding可以解决，但必须配合box-sizing: border-box，否则宽度会超出设定值 -
padding不能为负，设成负值会被浏览器忽略；它始终属于元素“内部”，所以会影响父容器的 height 计算（尤其在 flex 或 grid 容器中）
什么时候必须用 margin 才能生效
当你需要控制元素之间的距离、实现居中、或绕过父容器限制时，margin 是不可替代的。
- 两个
div紧挨着，想拉开间距？用margin—— 它不占背景，也不改变自身尺寸 - 块级元素水平居中？
margin: 0 auto是最轻量方案，但前提是该元素有明确的width - 想让一个元素“浮出”父容器边界？负
margin（如margin-left: -10px）能实现，padding做不到 - 注意：相邻块级元素的垂直
margin会合并（collapse），比如margin-bottom: 20px和margin-top: 15px实际只留 20px，这不是 bug，是规范行为
box-sizing 对 padding 行为的决定性影响
默认情况下，padding 会让元素变大；但加了 box-sizing: border-box 后，它就“塞进”你写的 width/height 里了。
- 没设
box-sizing时：width: 200px; padding: 20px;→ 实际占用宽度 240px - 设了
box-sizing: border-box后：width: 200px; padding: 20px;→ 内容区自动缩为 160px，总宽仍是 200px - 现代项目几乎都应全局重置：
* { box-sizing: border-box; }，否则padding的尺寸效应极难预测 -
margin不受box-sizing影响 —— 它永远在 border 外，永远不参与尺寸计算
行内元素对 padding 和 margin 的响应差异
行内元素（如 span、a）对这两个属性的处理完全不同。
-
padding的上下值会渲染出来（视觉上撑高），但不会影响文档流高度；左右值正常生效 -
margin的上下值完全无效（无法推开其他行内元素），只有左右 margin 起作用 - 如果需要控制行内元素的垂直间距，得把它变成
display: inline-block或display: inline-flex，再用padding或margin - 别指望
margin-top让一个span离开上方文字——它只会被忽略
实际写样式时，先问自己一句：这个空隙，是“内容需要离边框远点”，还是“这个元素需要离别的元素远点”？前者选 padding，后者选 margin。最容易错的是把垂直间距全堆在 margin 上，结果遇到合并；或者给行内链接加 margin-top 发现毫无反应——这些都不是语法错，而是对盒模型位置关系的理解偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
