margin 不属于盒模型尺寸部分，仅调节元素与邻居间距，不参与 width/height 计算；offsetwidth 不含 margin，getboundingclientrect() 返回的是含 margin 的几何包围盒；box-sizing 对 margin 无效。
margin 本身就不属于元素盒模型的“尺寸部分”
盒模型里真正参与 width/height 计算的，只有 content、padding 和 border —— 这三者加起来才是元素“自己占的地”。margin 是盒子外面的透明间隔，它不归这个元素“所有”，只是用来调节它和邻居之间的距离。浏览器在计算 offsetWidth 或渲染布局时，压根不会把 margin 加进去。
常见错误现象：用 getBoundingClientRect() 测出元素总占位比 offsetWidth 大，就以为“margin 被算进去了”，其实那是整个矩形区域（含 margin）的几何包围盒，不是盒模型定义的“元素尺寸”。
为什么设计成这样？是为了解耦布局控制权
如果 margin 参与宽高计算，那每次调间距都得重算整个布局流，父子嵌套时还容易引发循环依赖。把 margin 放在外面，让每个元素只管好自己的 content+padding+border，而间距由外部统一协调，更利于 flex、grid 这类现代布局机制运作。
-
margin可设负值，用于微调重叠或对齐，这在盒内区域（padding/border）是不允许的 - 垂直方向的
margin-top/margin-bottom会合并（collapse），说明它本质是“流间间隙”，不是“自身属性” - 给父容器设
overflow: hidden不会裁掉子元素的 margin，因为它根本不在父盒内部
实际占位 ≠ 盒模型宽度，别混淆这两个概念
一个 div 设了 width: 200px; margin: 30px;，它的 offsetWidth 还是 200，但实际在文档流中会推开上下左右元素，占据 260px × (height + 60px) 的空间。这种“视觉上变大了”的错觉，常让人误以为 margin 影响尺寸。
验证方式：
const el = document.querySelector('div');
console.log(el.offsetWidth); // 200
console.log(el.getBoundingClientRect()); // x/y/width/height 包含 margin 占位
关键点：前者是盒模型尺寸，后者是屏幕坐标系下的几何矩形 —— 它们服务不同目的。
box-sizing 对 margin 完全无效，别白费力气
box-sizing: border-box 只影响 padding 和 border 是否计入 width/height，对 margin 没有任何作用。它永远在 border 外面，永远不参与元素自身尺寸计算。
容易踩的坑：
- 试图用
box-sizing来“约束 margin”，结果发现毫无效果 - 在 flex 容器里给子项设
margin: auto实现居中，却误以为这是靠“撑开尺寸”实现的 —— 其实是 flex 自己接管了 margin 的语义 - 用
padding模拟margin来绕过折叠，结果背景色/边框意外延伸，反而暴露了本该是“外部空白”的逻辑
真正要控制的是“谁负责留空”：内部呼吸感用 padding，外部关系用 margin —— 这个分工一旦混淆，后续所有尺寸问题都会反复出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
