box-sizing对margin完全无效，因margin属于外部间距、不参与元素尺寸计算；padding和border则被box-sizing控制，因其位于元素可绘制边界内，需决定是否计入width/height。
box-sizing 对 margin 完全无效，这是设计使然
因为 margin 从不属于盒子的“尺寸计算范围”——它永远在 border 外侧、完全独立于 width/height 的定义逻辑。无论 box-sizing 是 content-box 还是 border-box，margin 都只做一件事：推远邻居，不改变自己。
为什么 padding 被 box-sizing 控制，而 margin 不行
padding 和 border 属于元素自身的“可绘制边界内”，浏览器需要决定它们是否计入你写的 width 和 height；margin 则被明确划归为“外部关系”，和父容器、兄弟元素共用同一片空白区域，根本不在元素尺寸声明的管辖范围内。
-
box-sizing: content-box下：width: 200px; padding: 16px;→ 实际宽 = 232px（内容区 200px + 左右 padding 各 16px） -
box-sizing: border-box下：width: 200px; padding: 16px;→ 实际宽 = 200px（内容区自动压缩为 168px） - 但无论哪种：
margin: 20px始终只是让这个元素离上下左右邻居各空出 20px，自身宽高不变，也不参与任何 box-sizing 计算
误以为 margin 受影响的常见错觉来源
实际是其他机制在起作用，不是 box-sizing 在干预 margin：
- 垂直方向的
margin合并（collapsing）：相邻块级元素的margin-top和margin-bottom会取较大值，看起来像“失效”或“被吃掉”，但这和box-sizing无关 - 父容器无
border或padding时，子元素的margin-top会“穿透”到父容器上边距（margin 穿透），调试时容易误判为 box-sizing 没生效 - 用了
display: inline-block或flex子项后margin不再合并，误以为是 box-sizing 改变了行为
真正要管住 margin 的地方，得换思路
既然 box-sizing 对 margin 无能为力，控制它的唯一方式就是理解它的作用域和规则：
- 水平
margin（如margin-left、margin-right）不会合并，负值合法且常用（比如margin-left: -4px微调对齐） - 垂直
margin合并只发生在普通文档流中的块级兄弟元素之间；加overflow: hidden、border-top: 1px solid transparent或改用display: flex都能破除合并 - 行内元素（如
span）的margin-top/margin-bottom无效，这是渲染模型限制，不是 bug
别试图用 box-sizing “修复” margin 表现异常——先确认是不是合并、穿透或 display 类型问题，那才是真正的入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
